SlideShare una empresa de Scribd logo
1 de 48
Screenplay
Tom Vian
   @SFBTom
  tomvian.com
 sfbgames.com
My Games




           @SFBTom
as3sfxr




superflashbros.net/as3sfxr
                             @SFBTom
Detective Grimoire




                     @SFBTom
Screenplay
    Screens
   Graphics
     Code
    Controls
   Gameplay
Screens
Screenplay - Screens

                        Flash Platform




 Screenplay - Screens                    @SFBTom
Mobile Phones




Screenplay - Screens                   @SFBTom
Tablets




Screenplay - Screens             @SFBTom
Screen Measurements




Screenplay - Screens                         @SFBTom
Aspect Ratio




Screenplay - Screens                  @SFBTom
Aspect Ratio: Mobiles




Screenplay - Screens                           @SFBTom
Aspect Ratio: Tablets




Screenplay - Screens                           @SFBTom
Aspect Ratio: PCs




Screenplay - Screens                       @SFBTom
Pixel Density




Screenplay - Screens                   @SFBTom
Graphics
Flash Auto Scaling




Screenplay - Graphics                        @SFBTom
Manual Resizing




Screenplay - Graphics                     @SFBTom
Background Overflow




Screenplay - Graphics                         @SFBTom
Scaling UI Elements




Screenplay - Graphics                         @SFBTom
Dynamic Layout




Screenplay - Graphics                    @SFBTom
Using Vectors




Screenplay - Graphics                   @SFBTom
CPU Rendering




Screenplay - Graphics                   @SFBTom
GPU Rendering




Screenplay - Graphics                   @SFBTom
Bitmap Scaling: Up (CPU)




           No Smoothing         Smoothing

Screenplay - Graphics                       @SFBTom
Bitmap Scaling: Up (GPU)




           No Smoothing         Smoothing

Screenplay - Graphics                       @SFBTom
Bitmap Scaling: Down (No Snapping)


No Smoothing




  Smoothing




Screenplay - Graphics           @SFBTom
Bitmap Scaling: Down (Snapping)


No Smoothing




  Smoothing




Screenplay - Graphics             @SFBTom
Mipmapping




Screenplay - Graphics                @SFBTom
Code
Conditional Compilation




Screenplay - Code                             @SFBTom
Checking Capabilities




Screenplay - Code                           @SFBTom
AIR Runtime




Screenplay - Code                 @SFBTom
Compiling to iOS




Screenplay - Code                      @SFBTom
Speed Tips




Screenplay - Code                @SFBTom
Controls
Tapping




Screenplay - Controls             @SFBTom
Dragging




Screenplay - Controls              @SFBTom
Gestures




Screenplay - Controls              @SFBTom
Accelerometer




Screenplay - Controls                   @SFBTom
Fake Mouse




Screenplay - Controls                @SFBTom
Game Pad




Screenplay - Controls              @SFBTom
Others




Screenplay - Controls            @SFBTom
Gameplay
Fixed Ratio




Screenplay - Gameplay                 @SFBTom
Variable Ratio




Screenplay - Gameplay                    @SFBTom
Tom Vian
   @SFBTom
  tomvian.com
 sfbgames.com

Más contenido relacionado

Más de mochimedia

Adobe Gaming Solutions by Tom Krcha
Adobe Gaming Solutions by Tom KrchaAdobe Gaming Solutions by Tom Krcha
Adobe Gaming Solutions by Tom Krcha
mochimedia
 
Getting Some Perspective: Away 3D 4.0 & Friends by Rob Bateman
Getting Some Perspective: Away 3D 4.0 & Friends by Rob BatemanGetting Some Perspective: Away 3D 4.0 & Friends by Rob Bateman
Getting Some Perspective: Away 3D 4.0 & Friends by Rob Bateman
mochimedia
 

Más de mochimedia (20)

Adobe Gaming Solutions by Tom Krcha
Adobe Gaming Solutions by Tom KrchaAdobe Gaming Solutions by Tom Krcha
Adobe Gaming Solutions by Tom Krcha
 
Simple Verlet Physics by Stuart Allen (FunkyPear)
Simple Verlet Physics by Stuart Allen (FunkyPear)Simple Verlet Physics by Stuart Allen (FunkyPear)
Simple Verlet Physics by Stuart Allen (FunkyPear)
 
Beat the Post-Launch Blues by Rob Davis (Playniac)
Beat the Post-Launch Blues by Rob Davis (Playniac)Beat the Post-Launch Blues by Rob Davis (Playniac)
Beat the Post-Launch Blues by Rob Davis (Playniac)
 
Game Aesthetics & Branding by James Pearmain (Jimp)
Game Aesthetics & Branding by James Pearmain (Jimp)Game Aesthetics & Branding by James Pearmain (Jimp)
Game Aesthetics & Branding by James Pearmain (Jimp)
 
Super Gun Kids: The Making Of by Iain Lobb
Super Gun Kids: The Making Of by Iain LobbSuper Gun Kids: The Making Of by Iain Lobb
Super Gun Kids: The Making Of by Iain Lobb
 
Bad Eggs Online: Our Experiences with Multiplayer by Rob & Jon Donkin
Bad Eggs Online: Our Experiences with Multiplayer by Rob & Jon DonkinBad Eggs Online: Our Experiences with Multiplayer by Rob & Jon Donkin
Bad Eggs Online: Our Experiences with Multiplayer by Rob & Jon Donkin
 
Combining Action and Strategy in One Game: The Making of Automech Tower Defen...
Combining Action and Strategy in One Game: The Making of Automech Tower Defen...Combining Action and Strategy in One Game: The Making of Automech Tower Defen...
Combining Action and Strategy in One Game: The Making of Automech Tower Defen...
 
Driving Stage3D: A Post Mortem by Nate Beck and Jeremy Saenz
Driving Stage3D: A Post Mortem by Nate Beck and Jeremy SaenzDriving Stage3D: A Post Mortem by Nate Beck and Jeremy Saenz
Driving Stage3D: A Post Mortem by Nate Beck and Jeremy Saenz
 
Next Generation Flash Gaming: Lessons from Console Development by Justin Lamb...
Next Generation Flash Gaming: Lessons from Console Development by Justin Lamb...Next Generation Flash Gaming: Lessons from Console Development by Justin Lamb...
Next Generation Flash Gaming: Lessons from Console Development by Justin Lamb...
 
Getting Some Perspective: Away 3D 4.0 & Friends by Rob Bateman
Getting Some Perspective: Away 3D 4.0 & Friends by Rob BatemanGetting Some Perspective: Away 3D 4.0 & Friends by Rob Bateman
Getting Some Perspective: Away 3D 4.0 & Friends by Rob Bateman
 
Winning With Audio by Selcuk Bor
Winning With Audio by Selcuk BorWinning With Audio by Selcuk Bor
Winning With Audio by Selcuk Bor
 
Going Mobile by Nate Beck
Going Mobile by Nate BeckGoing Mobile by Nate Beck
Going Mobile by Nate Beck
 
2 Dimensions Of Awesome: Advanced ActionScript For Platform Games by Iain Lobb
2 Dimensions Of Awesome: Advanced ActionScript For Platform Games by Iain Lobb2 Dimensions Of Awesome: Advanced ActionScript For Platform Games by Iain Lobb
2 Dimensions Of Awesome: Advanced ActionScript For Platform Games by Iain Lobb
 
Panel: Flash Development Life 2012, Moderated by Ethan Levy
Panel: Flash Development Life 2012, Moderated by Ethan LevyPanel: Flash Development Life 2012, Moderated by Ethan Levy
Panel: Flash Development Life 2012, Moderated by Ethan Levy
 
It's A Long Way To The Top...If You Want To Be An Indie Flash Dev by David Sc...
It's A Long Way To The Top...If You Want To Be An Indie Flash Dev by David Sc...It's A Long Way To The Top...If You Want To Be An Indie Flash Dev by David Sc...
It's A Long Way To The Top...If You Want To Be An Indie Flash Dev by David Sc...
 
Chasing China: The Next Mobile Gaming Frontier by Chris Shen of The9
Chasing China: The Next Mobile Gaming Frontier by Chris Shen of The9Chasing China: The Next Mobile Gaming Frontier by Chris Shen of The9
Chasing China: The Next Mobile Gaming Frontier by Chris Shen of The9
 
It's The End Of The World As We Know It (And I Feel Fine) by Ben Garney of Pu...
It's The End Of The World As We Know It (And I Feel Fine) by Ben Garney of Pu...It's The End Of The World As We Know It (And I Feel Fine) by Ben Garney of Pu...
It's The End Of The World As We Know It (And I Feel Fine) by Ben Garney of Pu...
 
For Your Ice Only by Reece Millidge of Damp Gnat
For Your Ice Only by Reece Millidge of Damp GnatFor Your Ice Only by Reece Millidge of Damp Gnat
For Your Ice Only by Reece Millidge of Damp Gnat
 
Mobile Gaming Goes Borderless: Why We're Heading Towards Multi Platform by Pe...
Mobile Gaming Goes Borderless: Why We're Heading Towards Multi Platform by Pe...Mobile Gaming Goes Borderless: Why We're Heading Towards Multi Platform by Pe...
Mobile Gaming Goes Borderless: Why We're Heading Towards Multi Platform by Pe...
 
Welcome to FGS 2012 by Josh Larson of Mochi Media
Welcome to FGS 2012 by Josh Larson of Mochi MediaWelcome to FGS 2012 by Josh Larson of Mochi Media
Welcome to FGS 2012 by Josh Larson of Mochi Media
 

Screenplay by Tom Vian

Notas del editor

  1. Some of my games Most with Adam for Armor Games Some with BBC Most recent popular game was Haunt the House, Halloween 2010
  2. Port of sfxr by Tomas Petersson Runs in the browser, also open source library for runtime Got started talking at FOTB 2010 with elevator pitch
  3. Current game with Adam, for iPhone, iPad, Android phones, Android tablets, BlackBerry PlayBook, desktop, etc One other artist, Catherine Unger 7 voice actors, including Tomamoto and Egoraptor Music by Raphael Benjamin Meyer, finished in under a month Started in Obj-C/Cocos2D, moved to AIR once 2.7 hit
  4. Flash Player in the browser, used in games like Machinarium AIR for desktops, new Captive Runtime bundles in AIR runtime to native formats (.exe, .app) AIR for Android devices, again new Captive Runtime bundles AIR into the .apk AIR for iOS, works differently due to licence, compiles the swf into native machine code, along with Flash library AIR for PlayBook, AIR built into device AIR on home devices, Samsung SmartTV pictured, also BluRay players and settop boxes out there Mostly talking about mobile devices, a little about desktop
  5. This is the list of officially supported mobile phones, as compiled by Adobe Mostly Android, 5 iOS devices in the bottom right Including iPod Touch here because almost identical to iPhone, despite being mini-tablet You’ll see lots of different sizes of screen, a few physical keyboards, one game pad
  6. Officially supported tablets from the same list Again, mostly Android, PlayBook, then iPad 1 & 2 Again, different screen sizes
  7. ‘ Screen size’ broken down into 2 measurements, aspect ratio and pixel density
  8. Aspect ratio is the ratio of width to height, usually in pixels Important for deciding layout
  9. Based on the Adobe supported devices list, weighted by the popularity value from gsmarena Evenly distributed across the 3 main ratios
  10. Also based on gsmarena popularity Tablets tend more towards widescreen All this means that if you’re developing for all screens, you should design around a wide screen, then adapt for more square devices
  11. Based on data collected by Steam client, which is a good target market for gamers Like tablets, PCs tend towards widescreen
  12. Pixel density is the diagonal pixel size of the screen divided by the diagonal physical size, usually in inches Important for sizing elements on the screen, especially user interface Smallest density on mobile is iPhone 3GS/ iPod touch 3G: 165 Smallest density on tablet is iPad: 132
  13. For very simple games, you might be able to get away with Flash auto scaling Set the scaleMode to Show All, and Flash will handle the resizing for you However, you get no info on how your game has been scaled Have to stick to your original stage area Perhaps extra background outside the stage to make it look better
  14. For most games, you’ll want manual control of resizing Set your scaleMode to No Scale, and flash will resize your stage rather than scale it You can listen to the resize event and apply your own layout and scaling based on the new screen size This way, a pixel on the stage is a pixel on the device
  15. For games that stick to the original stage area, you should design extra sections of background to allow for the most extreme aspect ratios The areas shown in bue are the extra areas you need to cover, note the sections missing from the corners
  16. When dealing with user interface elements, its far better to scale to a physical size as opposed to a pixel size Use Capabilities.screenDPI to calculate That way, a button will always fit nicely under a finger
  17. Lay out your elements based on the size of the screen and the position/size of other elements Can use virtual containers to decide layout For text, Flash Text Engine is great for layout, but poor on performance
  18. Vectors can still be useful in certain cases Large, long animation Frames within frames Get the best of both by drawing correctly sized vectors into BitmapData
  19. Cpu composites bitmaps, takes up computational cycles Allows you to use filters, blendmodes Good for simple games, low motion
  20. Gpu composites bitmaps, leaves cpu for everything else No filters, limited blendmodes Much faster
  21. When scaling up on the cpu, smoothing can be used, but it’s slow
  22. On GPU, there’s no choice, always smoothed, faster
  23. When scaling down, if snapping is turned off, resampling can cause rippling when moving slowly Smoothing can help, but still there
  24. Turning on snapping prevents this, but minimum speed is 1 pixel, so looks jerky Auto mode snaps only when bitmap is not rotated or skewed, scaled to ~100%, but doesn’t account for the slow movement
  25. Combat scaling issues with a mipmap Have several different versions of your bitmaps compiled in, use the one that’s closest to the scale you need Faster rendering Less scaling issues
  26. Any IDE using mxmlc has conditional compilation support Set flags in your code to be compiled in only if true Switch the values for each build Means recompiling for each target, not super neat
  27. Better to check at runtime for the capabilities you actually want Enable/disable features based on what’s available NEVER use Capabilities.os to check for platform Can leave features turned on, just unused if unavailable
  28. For AIR on desktops, Android and PlayBook, its actually a SWF running in a hardware specific AVM2 with extra features ABC is JITed at runtime into native machine code Standard best practices are a pretty safe bet
  29. On iOS, the ABC is put through the LLVM LLVM optimization, compilation step is not well documented on Flash Docs Means you can’t be sure what code is actually running Benchmark things, don’t assume AS3 best practices apply
  30. Biggest problem is probably going to be memory, low compared to desktops Techniques like object pooling can save memory and stop object creation, especially for graphical objects Always benchmark if you aren’t sure
  31. Talk a little about control schemes These devices have a wealth of new ways to interact Some old ways don’t work to well
  32. Button based games Using finger like mouse click Very intuitive Just listen to mouse click
  33. Dragging, direct simulation of physical interaction Like moving a piece of paper about a desk Intuitive, even for users new to touch games Does cover the screen though Mouse down, mouse up, enter frame (NOT mouse move)
  34. Gestures work great for users who are used to touch screen conventions Fairly intuitive for new users too Built in support for touch gestures in flash
  35. For certain types of game, like racing, pretty intuitive Trouble is screen moves with device Need really high contrast, obvious objects on screen Can tilt viewport to keep up, difficult to implement on fast paced games Built in support in AIR
  36. Use finger to drag a cursor about Only good if porting a game that really needs mouse over
  37. Difficult to implement well Keep buttons to a minimum Maybe start analogue stick wherever you first touch, allow for comfort
  38. Camera can be used, but most only on the back of the device Some phones have physical keyboards, good for fallback, but shouldn’t base game around it
  39. Fixed ratio game, where the layout of the game doesn’t need to adjust its ratio Can be treated like an app Screen ratio doesn’t affect gameplay The empty space can be filled with background graphics
  40. Variable ratio game, where the play area of the game changes shape with the screen Have to take gameplay into account, eg distance you can see ahead of you in a shmup or platformer, distribution of objects as they spawn at the edge In a scrolling game, you should scale in the main direction of motion