Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
9 Benefits of Android Game Development That Can’t Be Overlooked
Next
Download to read offline and view in fullscreen.

5

Share

Download to read offline

Mobile Game Development Using Eqela

Download to read offline

Everything is on mobile now and so is gaming. Game development has shifted from console to mobile, and it is not an easy conversion. We cannot stop it but we can always adapt. Unlike console, mobile comes with several platforms and several versions of each platform. Adapting to different screen sizes is just one of many challenges of developing for mobile. Conquer all these and more. Develop the Impossible! Introducing Eqela multi platform development tool. Eqela allows you to develop once and deploy your application on different platforms while still maintaining your desktop and console presence.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Mobile Game Development Using Eqela

  1. 1. {'3 $3813.15 33:’-W313 Copyright (c) 2014 Eqela Pte Ltd
  2. 2. vuw Au so sinus , .. ' 1;: ii'; e.'t? .e; ".. '., .. If i - _ J 1 eqelo Monue Game Development Using Eqela Cowdsht (c) 2014 Eqela Pte Ltd
  3. 3. I IIt_ , ‘ 2 ; .1 SCI, ‘ _'. ' , ‘ | H‘n" I U oi - "o oiiufflo t ot . I I 3 ' III I . nu-Iu. ;‘. 0; . . r . ‘ ‘>1 / l'l’‘‘l" '. ' ' . - t’ 1‘ ‘I! '3 3 I . I I 1 ' 1‘ D‘ u u ' n * 1 99930 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  4. 4. Who has made a mobile game before? Mobile Game Development Using Eqela
  5. 5. QHDQOID Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  6. 6. Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  7. 7. Windows an. 2 Mobile (3 Developm Using Eqela Copyrigh C) 2014 Eqela Pte Ltd
  8. 8. Windows 8 Mac OS X Windows " II I‘! L’ . . E E , l.‘. ‘l-‘K5 TIZEN CIHDQOID Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  9. 9. ©lb>jeotr. fivee To learn common techniques and concepts related to developing games, especially on multiple mobile devices To understand what Eqela is, how it works, and how it can be used to develop games for multiple platforms To be able to write game source code in Eqela and to apply the game development concepts in actual game applications To develop mobile games Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  10. 10. Questions?
  11. 11. ]1N"J1“l1B. QD]]DUJ G3"£l"HGDN
  12. 12. W/7’@Z9llC01 30" Windows 8 3 Mac OS X E: W. ::: ::: :“ E 'fi' L, ... —in“X TIZEN" CIODQOID Q ll. @ 4): , joLLa JZME '3: 5' symbian Windows Mobile What does it take to develop software for these operating systems? ‘ Mobile Game Development Using Eqela Copyright l_c'J 2014 Eqela Pte Ltd
  13. 13. What would you need? Expertise in specific programming languages per each platform (JavaScript, Objective-C, C, C#, C++, Java, Python, etc. ) The tools, libraries and frameworks (SDK), usually distributed by the platform vendors Knowledge in how to use the specific tools and SDKs °(| ‘?!3 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  14. 14. While targeting only the most popular target platforms, a developer will need to work with 10-20 different operating system platforms/ Versions, at least 3-5 different programming languages, each with different API libraries. Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  15. 15. Why would you want to do that? Mobile Game Development Using Eqela
  16. 16. WORLDWIDE OPERATING SYSTEM MARKET SHARE: 12/ 2013 Percent Os X m L87 Windows XP 28.98 Windows Vista 2 3.61 Windows? C 47.52 1.| . . :-I Windows 8 E 6.89 Windows Windows8.1 T 3.6
  17. 17. Global Smartphone Market Share By OS (Q2 2014) ‘»/1/nciows Phone 2 702» BlackBerry OS / — 0.60% . ‘_ Source: Strategy Analytics, July 20 14 Mobile Game Development Using Eqela Copyright lC_l 2014 Eqela Pte Ltd
  18. 18. 11‘ Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  19. 19. Worldwide device shipment by OS 2014 (Gartner) Others 28% Android 42% RIM 1% iOS/ Mac0S 14% Windows 15%
  20. 20. WORLDWIDE MOBILE BROWSER MARKET SHARE: 12/2013 Percent Android Browse’: H Opera Mini 1. 4. I: _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Chrome I I E BlackBerry 0.88 : 5/ : lntemet Explorer 1.58 : : Symbian O29 : . Opera Mobile 0.18 I I All other 291 E I , I
  21. 21. WORLDWIDE COMBINED BROWSER MARKET SHARE: 12/2013 Percent _ Other gfldmld 3 39 2. / 1.70 Opera rowser - Safari Intemet Chrome Explorer Firefox Im-/ X4 Copyright lC_l 2014 Eqela Pte Ltd
  22. 22. APP DOWNLOADS APP REVENUE O2 2013 O2 2013 Indexed Revenue 0 0 I05 App Store Google Play 108 App store Google Play SOURCL Asa l‘u~: ~ c lino‘ gonzo 511 r: l‘. l1.(', ~: SOLHCL Aou I‘UWi0 wig ogorcu Mobile Game Development Using Eqela Copyright lo) 2014 Eqela Pte Ltd
  23. 23. There are many platforms, and they have their respective strengths and weaknesses Mobile Game Development Usi nnnnn la
  24. 24. a. OS Windows 8 Mac OSX HTML 1 : : Wsazzr E '5' L, ... —in“X TIZEN" CIHDQOID “ME '= -Blackeeiry -8: jotta : ’ symbian Mobile Game Development Using Eqela Copyright l_c'J 2014 Eqela Pte Ltd
  25. 25. The traditional ways (1) Work only on one platform (2) Create the same application several times (once per platform) (3) Do ”cross platform development” "“(| "pI>A‘ Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  26. 26. GEDBGDSS DDU. .tD”D“DTGDflBltID DDD§Tl7D§U. flDflDM DENT
  27. 27. "Cross platform tools do not work. Writing native code is the only way. " Mobile Game Development Using Eqela
  28. 28. Common issues Large installer size Brcessive memory use Low performance Limited API access
  29. 29. .5 . . 1 5. -3 I . s.‘ . I “‘ _. —‘ Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  30. 30. Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  31. 31. ‘Ill-v‘ Mobile Game Development Using Egelf Copyright (c) 2014 Eqela Pte Ltd
  32. 32. Tl-IE VIRTUAL MACHINE
  33. 33. “°Vin°ttuafl Maollofinel“ Ateollmiteottire 0 Lu%, '2-Puthon I sat Mono, Appcelerator, Unity, Xamarin, Corona, .. Mobile Game Development Using Eqela Copyright (C) 2014 Eqela Pte Ltd
  34. 34. Interpreter / Virtual machine I You r Your code : - Tool —r - + — —— 4- COCIE firtual Machine CInD= lO| D Mono, Appcelerator, Unity, Xamarin, Corona, ..
  35. 35. Your Code Interpreterl Virtual I’ machine_ ! '7 . _. Your code — Tool : ~ + — Virtual Machine Mono, Appcelerator, Unity, Xamarin, Corona, ..
  36. 36. Viiattiai maotninog The jooolbioms Increases memory usage Makes application Installers much bigger Applications can only Access selected Parts of the native API Reduces runtime Perfonnance Due to this approach being very popular, many consider cross platform development to be slow, high in memory use, and producing bigger installers. Mobile Game Development Using Eqela Copyright IC] 2014 Eqela Pte Ltd
  37. 37. Android Binding And roid. * Linux Kernel (Source: http: //docs. xamarin. com/ Android/ Cuides/ Advanced_Topics/ Architecture) Mono, Xamarin, Unity Mobile Game De-ueioprnent Using Eqela Copyright iC_I 2014 Eqela Pte Ltd
  38. 38. "Virtual machine" (web) / _-3, Int. 'pre‘. —:r / i Viv ial rrachifie § J F‘ K ~ Eff: BROWSER Mono, Appcelerator, Unity, Xamarin, Corona, .. Mobile Game Development Using Eqela Copyright (Cl 2014 Eqela Pte Ltd
  39. 39. The virtual maohflme jpflmgfim Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  40. 40. HTML Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  41. 41. CD PhoneGap 9 EFXBERDQVAM Mobile Game Development Using Eqela Copyright (C) 2014 Eqela Pte Ltd
  42. 42. Common issues Large installer size Brcessive memory use Low performance Limited API access
  43. 43. THE C++ APPll0ACll
  44. 44. The C++ Approach SW llIO :05 é Q5 ) D / Objective-C A I I , ’ / _.. -" = :': a(ack3e”y 10 / / 1 'F' V CIODQOID ~. '; 9312 BROWSER Marmalade, Unity, Cocos2D, Unreal . . Mobile Game Development Using Eqela Copyright l_c‘, i 2014 Eqela Pte Ltd
  45. 45. C++ / bytecode combo (Unity) -> 4“ ——> Linux Kernel Three simultaneous components running for one game Mobile Game Development Using Eqela Copyright lC_| 2014 Eqela Pte Ltd
  46. 46. Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  47. 47. Say no to vendor lock-in Our foundation of standard C++ and OpenGL ES means there's no proprietary lock-in - ; our code is f. ... ... ... ... .. platform tool. you are firmly in control of your own future. , ... .. . ... .. . ... o.. ... .. .. . .. . ... .. ... ;,. .. . ... ls-sln . ... .. . .. AA: ll"l W your cross- Marma| adeSl3l( Uu‘1,. rl| ‘l>1'. |.)
  48. 48. Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  49. 49. These approaches are not good Mobile Game Development Using Eqela
  50. 50. SOURCE COIlE CONVERSl0N
  51. 51. gs, ~- Jeaizg , ' ifl_Q Cfii A C C++ Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  52. 52. Effective Cross Platlon-n Development Tool - Eqela % L i Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  53. 53. Technical Benefits Small installer size Opimal -i - No API access limitations Mobile Game Development Usi nnnnn la
  54. 54. A Sample Application class Main : Layerwidget { public void initia1ize() { base. initia1ize(); add(Labelwidget. instance(). set_text("He1lo world")); A r‘: CIHDROD Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  55. 55. class Main : Layerwidget { public void initialize() { base. initialize(); add(Labelwidget. instance(). set_text(“Hello world")); } } package mk. test; public class Main extends eq. gui. Layerwidget { @0verride public void initialize() { super. initialize(); ((eq. gui. Containerwidget)this). add(((eq. gui. Widget)eq. widget. Labelwidge t. eq_widget_LabelWidget_instance(). set_text(eq. api. StringStatic. eq_api_ StringStatic_for_strptr(“Hello wor1d“)))); } public Main() { * (JAVA) Mobile Game Development Using Eqela Copyright (Cl 2014 Eqela Pte Ltd
  56. 56. Get it? Mobile Game Development Using Eqela Copyright (C) 2014 Eqela Pte Ltd
  57. 57. Products Compile Offline Compile Online Automated QA Testing Tool iG§ ~; “.2 7‘ ; .V‘ . ‘ mm . C “ " * Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  58. 58. Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  59. 59. F53 E cin3=zoi: > E , :03 Mac OS X Windows 8 -1 Wl d W 6 . Microsoft‘ I. P2033 EH. ‘-‘-13a II. NET Mobile Game Development Using Eqela Copyright l_c'J 2014 Eqela Pte Ltd
  60. 60. Hmfiifi How to get started? Mobile Game Development Using Eqela Copyright (C) 2014 Eqela Pte Ltd
  61. 61. Eqela Studio A programmer's tool for the development of multi-platform applications Includes the Eqela compiler and libraries Includes a graphical development environment (IDE) Can also be used on the command line Supported on Windows, Mac OS X and Linux Can be downloaded from www. eqe| a.com °(| ‘?!3 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  62. 62. Eqela Studio Packages Can be used free of charge: Can compile all Eqela applications to the current system (desktop operating systems) The Eqela online compiler can be used to compile to different (mobile) platforms Licensed subscription packages allow unlimited compiling to all supported target platforms, with or without Internet connection °(f’o!3 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  63. 63. Activity (1) Install the latest version of Eqela Studio 2.0 (2) Register a user account, activate it and log in Windows prerequisites: Windows 7 or higher Mac prerequisites: Mac OS X 10.7 or higher; must have the development tools installed (Xcode 5 or higher) Linux prerequisites: A 32bit version of an Ubuntu l3.l 0—compatible operating system (or with 32 bit compatibility libraries). Development packages and C compiler must be installed. °(r‘? !3 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  64. 64. Eqela modules Eqela programs are composed of logical components titled "modules" Each module has a unique name, usually expressed in the "reverse domain" notation: Eg. "com. eqe| a.mymodule" or "com. mycompany. mobi| eapp". Module names are conventionally all lowercase letters, and must contain at least one dot (. ). Several types of modules can be made: Most importantly (1) library modules and (2) application modules. The last component of the name of a library module starts with "lib", eg. "com. mycompany. |ibmy| ibrary". On the filesystem, a module is a directory; the name of the module is the name of the directory Qqpls Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  65. 65. Eqela projects An "Eqe| a project" is the source code of an Eqela module. It is contained in a directory, the name of which is the name of the module. The source code directory contains source code files, ending with a ". eq" extension (Eqela source code) Includes a file named "eqe| a.config" where many project settings are defined A "display name" defines the user-visible name for an application (seen in eg. application start menus, etc. ). Configured in eqela. config. °(| "o!3 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  66. 66. o 0 Activity 1. Choose "Create a new project“ from the main screen menu. 2. Type in the name of your project / product and any display name you would like. 3. Choose "Blank application” as the template. Open the file “eqela. config". (Note how the display name is configured) 4. Edit the generated class and make it look like this: class Main : Command { public int main(String command, Collection args) { Log. message(“Hello world”); return(@); } } 5. Try to run your program by clicking on the “Execute” button with the green play icon. What happens? Qqcls Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  67. 67. Dependencies Eqela applications can (and should) be divided into reusable library modules. Any module can "depend" on other library modules in order to use their functionality. A usual Eqela application will easily depend on several external modules. Eqela comes bui| t—in with various modules. Modu| e/ library dependencies are configured in the eqe| a.config file using the "depends" keyword. Dependency libraries are automatically searched for by the compiler in certain directories Qqpls Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  68. 68. Common module types library : A reusable library consoleapplication 2 An application intended to execute in text mode / on the command line widgetapplication : An application with a graphical user interface (GUI), implemented with standard user interface controls (widgets) customguiapplication : A GUI application that does not use the standard user interface controls (widgets) / (I A “ " !3 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  69. 69. Activity Edit the eqe| a.config file by adding the following two lines: moduletype: consoleapplication depends: com. eqe| a.| ibconso| e Run your program again by clicking on the "Execute" button. What happens now? Do you see the output? "“r| "p! A' Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  70. 70. Information / reference materials http: //dev. eqela. com http: //dev. eqe| a.com/ manual http : //dev. eqela. com/ api/ latest QQ9-'0 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  71. 71. GRAPIIICAL U SE11 INTERFACES
  72. 72. Frame is the fundamental e ement I‘. " FrurIeApp . " '7‘ 7‘ 3 Furntlbfl >- 0 . -naeuumi Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  73. 73. About Frames All Eqela GUI programs will display their graphics inside a frame Frames are usually opened automatically by the framework; programmer does not usually interact with the Frame class directly If needed, the programmer CAN open his/ her own frames by calling the Frame. for_controller() method (generally only supported on desktop platforms) "“r| "p! A' Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  74. 74. Stirfaeess ellemetat itasiccfle frames A Frame Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  75. 75. About Surfaces Surfaces represent the lowest level graphical elements in Eqela programs Surface properties: location (x / y), size (width / height), rotation angle, alpha (transparency), scale factor Some surfaces can be drawn to (rendered); some can contain other surfaces Implemented using an appropriate platform specific component; eg. android. view. View on Android, U| View on iOS, etc. An Eqela application rarely deals with Surfaces directly oqplo Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  76. 76. Widgets ‘U21S@ stiriiaees fer drawimg A Frame Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  77. 77. About Widgets Widgets are reusable user interface components that can be combined together to construct a complete user interface Widgets usually serve one of two purposes: (1) Container/ layout widgets that are used to position other widgets, and (2) widgets that have a graphical appearance Widgets that have a graphical appearance use surfaces to perform the actual rendering of the graphics "“r| "p! A' Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  78. 78. Activity 1. Create a new Eqela application project (Blank template) and give it a module name and display name that suggest that it is your widget sample application. 2. Add the following on the Main class: class Main : Layerwidget { public void initialize() { base. initialize(); set_size_request_override(px("50mm"), px("70mm”)); addlcanvaswidget. for_colors(Color. instance("red"), Color. instance("green"))); addlLabelwidget. for_string("A Frame") . set_font(Theme. font(). modify("6mm bold color= blue outline—color= white"))); } } 3. Edit the eqela. config file and declare a dependency on the library titled com. eqela. libcommonwidget (the Labelwidget is found in this library). 4. Execute the application. 999,3 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  79. 79. Activity / / Create a new project for the following program, then type the code and execute / / the application. This project depends on com. eqela. libcommonwidget and / / com. eqela. libdialogwidget class Main : Layerwidget, EventReceiver { public void initialize() { base. initialize(); / / Our component asks to be sized 5 centimeters x 7 centimeters set_size_request_override(pxl”50mm“). pxl"70mm")): / / This is the gradient in the background add(Canvaswidget. for_colors(Color. instance("red“), Color. instance("green"))); / / A "Boxwidget" lays out widgets either horizontally or vertically / / We configure a margin and spacing of 1 millimeter here var vb = BoxWidget. vertical(). set_marginlpx(”1mm")). set_spacing(px("1mm")): addlvb): / / NOTE: In Eqela applications, we commonly “chain” method calls like this: vb. add(LabelWidget. for_string(“A Frame") . set_font(Theme. font(). modify("6mm bold color= blue outline-color= white“))); 999,3 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  80. 80. Activity / / The following code does exactly the same thing: var font = Theme. fontl); font. modify(“6mm bold color= blue outline—color= white“); var label = Labelwidget. for_string(”A Frame“); label. set_font(font); vb. add(label); / / This adds a button: vb. add(Buttonwidget. for_string(”Click me"). set_eventl"myevent“)); / / This method is called when the button is clicked. The event object is / / passed as the parameter. public void on_eventl0bject 0) { / / NOTE: This is how we do string comparisons in Eqela: if("myevent". equals(o)) { MessageDialog. show(get_enginel), “Thank you for clicking me"); return; 9991.3 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  81. 81. Widgets and games Widgets are primarily used for the development of non- game applications (although they can also be used for games) For the development of games and other highly graphical / animated applications, specialized libraries are available °(| ‘?!3 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  82. 82. GEADHHNGE Edi EB IIBAEBH DES
  83. 83. What is a "sprite" Mobile Game Development Using Eqela '2 «E Copyright (c) 2014 Eqela Pte Ltd
  84. 84. Eqela Sprite Erigitme The Eqela Sprite Engine (com. eqe1a.1ibspriteengine) is a simple-to-use, powerful, cross- platform 2D game development engine Mobile Game D eeeeeeeeeee sing Eqela Copyright (c) 2014 Eqela Pte Ltd
  85. 85. Sprite Engine: Basic concepts SEScene: A broad segment of a game or application that starts and ends, and can perform many things in between. A scene is logically separated into a repeatable functional unit (eg. MenuSene, MainGameScene, HighScoreScene, etc. ). Only one scene can be active at a time. SEElement: A low level graphical element that can be positioned, resized, rotated, scaled and that has an alpha (transparency) value. Very similar to the concept of "surface" SESprite: A specialized instance of SEElement that has a graphical rendering. Can be rendered using a bitmap image, styled text or a solid color. SELayer: A container element that can be used to contain other elements (sprites or layers). 999,3 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  86. 86. Activity / / Create a new project and give it any suitable name of your choosing. // This program depends on com. eqela. libspriteengine (edit eqela. config) / / NOTE: Specify the moduletype as customguiapplication / / Use the following program as the Main class: class Main : SEScene { SESprite bg; SESprite sprite; / / The initialize method is called to construct the scene. public void initialize(SEResourceCache rsc) { base. initialize(rsc); / / This is the black background bg = add_sprite_for_color(Color. instance("black"). get_scene_width(), get_scene_height()); bg. move(0, 0); / / Here we create a green rectangle sprite of 100x100 pixels, and / / we position it in coordinates (100,100) sprite = add_sprite_for_color(Color. instance("green"), 100, 100); 999,3 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  87. 87. Activity sprite. move(100, 100); } / / The cleanup method is used to clean up the scene. whatever elements / / (sprites or layers) you construct during the scene, you must explicitly / / remove during cleanup. public void cleanupl) { base. cleanup(); sprite = SESprite. remove(sprite); bg = SESprite. remove(bg); pqpls Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  88. 88. rfir%; %'; -x What is a "game loop"? Mobile Game Development Using Eqela Copyright (C) 2014 Eqela Pte Ltd
  89. 89. Game loop The game loop is the main driver of the game It is a constant loop that, on every iteration, updates the game state and draws / updates the graphics The Sprite Engine provides a functioning game loop automatically / (I A “ " !3 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  90. 90. Activity: Using the game loop / / Add the following method to the Main class of the previous activity: / / The game loop repeatedly calls the update() method of the scene, several / / times per second. The “now” parameter tells you the current time; the / / “delta” parameter tells you how long has elapsed since the method was / / last called. public void update(TimeVal now, double delta) { base. update(now, delta); sprite. move(sprite. get_x() + delta * 10, sprite. get_y()); / / What happens to the program when you implement the above? Can you / / explain why? Qcfpla Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  91. 91. Activity Enhance the previous program: Modify the implementation of the update() method so that when the rectangle will reach the right edge of the screen, it will turn back and start moving towards the left. When the rectangle reaches the left edge, it will start moving towards the right again. Make the rectangle also move from top to bottom and back to top again in the same way at the same time (so that the rectangle will bounce around the screen, moving diagonally) ’= (|"p'A4 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  92. 92. Activity Modify your previous program so that the speed of the rectangle will constantly accelerate: But when the rectangle reaches any of the edges of the screen and changes direction, the speed will reset to a low starting speed again. Use the set_rotation() and get_rotation() methods of the sprite in the same way as move() and set_x() so that the square will also rotate while it moves. ’: (|"p'A‘ Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  93. 93. Drawing text / / Text in the Sprite Engine is drawn as sprites; to draw text, first / / create a sprite that contains the text, and then you can move the / / text around just as any other sprite. / / Add the following at the end of the initialize() method of your program: / / Prepare the font named "myfont” with the given properties rsc. prepare_font("myfont", “arial bold color= white“, 40); / / Create a new sprite using the specified font and with the given text contents text = add_sprite_for_text("Hello world", "myfont”); / / Move the text to the bottom of the screen text. move(0, get_scene_height() — text. get_height()); / / Add also the necessary variable declaration and the code to remove / / the sprite inside the cleanup() method. “ [ ' ~1 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  94. 94. Activity Enhance your previous program: Instead of the static string "Hello World", let the text sprite display the number of times that the square has bounced from the edges of the screen: Every time the square bounces, let your program increment a counter and update the text in the sprite. HINT: You can call text. set_text("(contents of the string)"); to change the text HINT: See section "Formatting strings" in the Eqela developer's manual for how to format the string contents. ’= (|"p'A4 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  95. 95. Graphics resources You can easily incorporate PNG orJPG graphics in your Eqela applications: However, on some platforms only PNG files are supported: It is therefore recommended to always use PNG All bitmap graphics files (ending with either of the extensions . png or . jpg) in the source code directory (along with your . eq files) are considered "bitmap resources". They can be referenced from your code using their "id" (which is the name of the file without the extension) Eg. Save image mysprite. png in your source code directory; prepare the image using rsc. prepare_image("prepared_image", "resourceid", size); then create a sprite for it using add_sprite_for_image(SElmage. for_resource("prepared_image"); ACTIVITY: Change your green rectangle to a PNG graphic file instead (use any graphic you like) pqpla Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  96. 96. H E? E‘«I¥_E E-'i'*'iI'1 E D E ‘.3 E L E3 F‘ I’? E H T ¥_¥ 3521 H E-' Copyright (c) 2014 Eqela Pte Ltd
  97. 97. Fixed dimensions 640x480 image with 640x480 resolution Mobile Game Development Using Eqela Copyright (C) 2014 Eqela Pte Ltd
  98. 98. The problem with fixed dimensions 640x480 image with 320x240 resolution Mobile Game Development Using Eqela Copyright (C) 2014 Eqela Pte Ltd
  99. 99. A better way Never write pixel coordinates, positions or sizes directly: Instead, use numbers relative to the current size of the screen Use decimal numbers (double data type) and get_scene_width() and get_scene_height() For example: Make a sprite that covers one quarter of the screen, regardless of the size, shape or resolution of the screen: add_sprite_for_co| or(Co| or. instance("#00FF00"), get_scene_width() * 0.5, get_scene_height() * 0.5); "“"| "p'>A‘ Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  100. 100. Sample / activity / / Create a new project and give it any suitable name of your choosing. // The project depends on com. eqela. libspriteengine / / Include some kind of a graphical image (PNG) inside your project. // Name the file "myimage. png” / / Declare three SESprite variables in your Main class. Name the variables / / ”sprite1”, "sprite2" and ”sprite3”. In the initialize() method of your / / class, include the following code: rsc. prepare_image("half_image", "myimage", 0.5 * get_scene_width()): rsc. prepare_image("quarter_image”, "myimage", 0.5 * get_scene_width(). 0.5 * get_scene_height()); rsc. prepare_font(“myfont“, "bold arial color= white outline—color= black“, get_scene_height() * 0.05); spritel = add_sprite_for_image(SEImage. for_resource("half_image")); sprite2 = add_sprite_for_image(SEImage. for_resource(“quarter_image“)): sprite3 = add_sprite_for_text(“This is text", "myfont"): sprite1.move(0,0); sprite2.move(0.S * get_scene_width(), 0.5 * get_scene_height()); sprite3.move(0,0); Qqcls Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  101. 101. Sample / activity / / Create also a cleanup method that removes the three sprites. 999:0 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  102. 102. Handling user input User input (both keyboard and pointer/ mouse / touch screen) can be handled in two ways: (1) By overriding certain virtual methods of SEScene to detect when the event starts (pressed) and stops (released) (2) By checking for the status of keys or pointers during the update() method °‘i“'3 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  103. 103. Activity / / Create a new sprite engine application project. Let your Main class / / inherit SEScene. In this class, implement the following methods: eqelo public void on_key_press(String name, String str) { base. on_key_press(name, str); } public void on_key_release(String name, String str) { base. on_key_release(name, str); } public void on_pointer_leave(SEPointerInfo pi) { base. on_pointer_leave(pi): } public void on_pointer_press(SEPointerInfo pi) { base. on_pointer_press(pi): / / NOTE: pi. get_x() and pi. get_y() tell you where. } public void on_pointer_release(SEPointerInfo pi) { base. on_pointer_release(pi): } public void on_pointer_move(SEPointerInfo pi) { base. on_pointer_move(pi); Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  104. 104. Activity / / In the initialize() method, create a sprite that you will use to / / hold text values. Position the sprite at the bottom of the screen. // when any of the above methods is called, let them set the text of / / the sprite to state what event it was (eg. “key pressed”, "pointer / / moved”, etc. ) pqpla Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  105. 105. Activity Make a new sprite engine application project: In the Main class, construct a user interface that displays four images that together cover the entire screen: One image in each corner of the screen Capture the pointer pressed / released events: While any of the four images is being pressed, change the image to something else to indicate to the user that the image is being pressed When any of the images is clicked or tapped, let the application display on screen (using a text sprite) which image was clicked cffplc Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  106. 106. Multiple scenes public class Main : SceneApplication { public Framecontroller create_main_scene() { returnlnew MainScene()): } } public class Mainscene : SEScene { public void switch_to_second_scene() { switch_scene(new SecondScene()); } } public class Secondscene : SEScene { public void back_to_main_scene() { switch_scene(new Main()): } } / / ACTIVITY: Enhance your previous program: Create four new 999,3 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  107. 107. Multiple scenes / / scene classes in your application: One for each image in the / / Main scene. Then, when any of the images in the main scene / / are clicked, make the application switch to the appropriate / / scene. Make a way for the user to return from the new scene. / / NOTE: Make sure to always delete the sprites you create in / / the cleanup() method of each scene! Otherwise they may "survive" / / to the next scene. 999,3 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  108. 108. Handling user input (other way) public class MyScene : SEScene { public void update(TimeVal now, double delta) { base. update(now, delta): if(is_key_pressed("enter")) { / / do something that reacts to "enter" being pressed } if(is_key_pressed("a")) { / / do something that reacts to "a" being pressed } foreach(SEPointerInfo pi in iterate_pointers()) { if(pi. get_pressed()) { / / The pointer or touchscreen is being touched / // clicked a (pi. get_x(), pi. get_y()) } } } } / / ACTIVITY: In one of your four scenes, create a sprite that moves 999,3 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  109. 109. Handling user input (other way) / / if you drag the pointer on the screen: wherever you click / drag, // that's where the sprite moves. In the same scene, if the user / / presses the “space” key, the sprite would change its appearance / / (either color or image, etc). / / In another of the four scenes, make it so that the sprite follows / / the mouse pointer even if you do not click or drag. QCPP-'0 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  110. 110. H E? E‘«I¥_E E-'i'*'il'1E D E ‘.3 E L E3 F‘ I’? E H T ¥_¥ 3521 H E-' Copyright (c) 2014 Eqela Pte Ltd
  111. 111. Activity Make a new sprite engine application project: The application will be composed of two scenes: The "main menu" and the "game scene". In the main menu, display a full screen background image that introduces the "game" (you can use any background image). Include in the main menu also a button that has the text "Play" on it. Clicking on the button will switch to the other scene. In the other scene, create a sprite that is initially in the middle of the screen (you can choose to have a background picture as well if you like). Let the user move the sprite using arrow keys on the keyboard. Alternatively, if the user clicks and holds the pointer somewhere on the screen, the sprite would move from where it is towards the location where the pointer is being held. Dragging the pointer should make the sprite move towards the new location. In the second scene, also include a button labelled "Quit" that will return to the main scene. Pressing "escape" should achieve the same effect as clicking the button. Qqpla Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  112. 112. Entities Entities (instances of the SEEntity class) can be added to a scene much like elements (layers or sprites) can. However, entities do not have apperance: They have behavior. Entities do not need to be manually removed from the scene. "“"| "p'>A‘ Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  113. 113. Frititiess Sample class MyEntity : SEEntity { public void initialize(SEResourceCache rsc) { base. initialize(rsc); // the entity can create sprites or do other initialization } public void cleanup() { base. cleanup(); // any sprites created by the entity should be removed here } public void tick(TimeVal now, double delta) { / / Here the entity can update its own status } / / NOTE: The entity can also remove itself from the scene by / / calling remove_entity() } class Myscene : SEScene "“(["p“A‘ Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  114. 114. Firitities: Sample public void initialize(SEResourceCache rsc) { base. initialize(rsc); add_entity(new MyEntity()); } / / ACTIVITY: Modify your previous program: Implement the "player character" / / by using a new entity class that handles the entire functionality of the player / / (creating the sprite, capturing key and pointer presses, moving the / / character around) ’'‘‘([': '‘A‘ Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  115. 115. Activity (continued) Add to your previous program: Create another entity class named "Monster". The entity would create a sprite with a scary looking appearance. The sprite should initially be placed in a random location on the screen. When the scene is created, create several monster entities and add them to the scene Implement the tick method of the Monster entity: Make the monster behave so that on every tick, the monsters would move towards the player. (HINT: In the Monster entity class, you can use code like "get_scene() as MySceneClass" to get a reference to your scene class. Then implement something in your scene class that the Monster class can call to know where the player is. Qqpls Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  116. 116. Playing sounds / / Generic audio clip playback is enabled through the use of com. eqela. libaudioclip. // The class AudioClipManager can be used to easily play audio clips in two steps: public class Myscene : SEScene { public void initialize(SEResourceCache rsc) { base. initialize(rsc); // "mysound" is a resource ID, like with image resources: // It is the filename of the audio clip with the file extension removed. AudioClipManager. prepare("mysound"); } public void on_time_to_play_sound_effect() { AudioClipManager. play("mysound"): } } / / NOTE: Audio file format support is very platform dependent: Different platforms / / support different formats, specifically: / / Windows Desktop: wav / / HTML5: mp3 / ogg / m4a / wav (depending on the browser) / / Mac OS X: mp3 / / Android: mp3 / ogg / m4a / wav / .. Qqpla Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  117. 117. Playing sounds / / JZME: wav / / windows Phone: wav / / To support all platforms, you need to supply the audio clip in the necessary formats. 99910 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  118. 118. Activity (continued) Enhance your previous program: As the monsters and the player move, compare their locations, and determine if a monster has reached a player. If any of the monsters reaches the player, the game should end and the player should be given a "Game Over" notification. Then the game should return to the main menu. Include sound effects in your game. crfplc Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  119. 119. H E? E‘«I¥_E 13:3: {'1 E C? E {.3 E L E3 F‘ I’? E H T ¥_¥ 3521 H E4 Copyright (c) 2014 Eqela Pte Ltd
  120. 120. Button entities (SEButtonEntity) The button entity (class SEButtonEntity) provides a handy way to create a bitmap button sprite that can be clicked and can react to the click. To react to the click on an SEButtonEntity, implement the SEMessageListener interface in your class, then call the set_listener () method on the button entity class. °(| ‘?l3 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  121. 121. Periodic timers / / Periodic timers can be easily implemented with the convenience / / class SEPeriodicTimer: class MyScene : SEScene, SEPeriodicTimerhandler { public void initializelSEResourceHandler rsc) { base. initialize(rsc); add_entity(SEPeriodicTimer. for_handler(this, 1000000)); } public bool on_timer(TimeVal now) { Log. message(”This method is now called once per second”); // return true to continue the timer / / return false to end it return(true); } } orpclo Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  122. 122. Reminder: Don't forget to clean up Any sprite you create during your gameplay, you MUST destroy in the cleanup () methods of your game. If your entity or scene creates a sprite, you must remove it in the cleanup. If you do not, the sprite will "linger", and consecutive gameplays will become slower and slower. °(Ppl3 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  123. 123. SEMovingSpriteEntity Making a lot of entities that always make one sprite? You can try to use sprite entities (SEMovingSpriteEntity). 99973 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  124. 124. Sanrijpieg R@eE: etEntity public class RocketEntity : SEMovingSpriteEntity { double xspeed = 0.0; double yspeed = 0.0; public void initialize(SEResourceCache rsc) { base. initialize(rsc); rsc. prepare_image("rocket", "rocket", 0.05 * get_scene_width()): set_image(SEImage. for_resource("rocket")); move(get_scene_width() / 2, get_scene_height() / 2); } public void tick(TimeVal now, double delta) { base. tick(now, delta); if(is_key_pressed("up")) { accelerateldelta); } if(is_key_pressed("left”)) { turn(-MathConstant. M_PI * delta); } if(is_key_pressed("right")) { turn(MathConstant. M_PI * delta); } move(get_x() + xspeed * delta, get_y() + yspeed * delta); var x = get_x(). y = get_y(); if(x < 0 | | y < 0 | | x >= get_scene_width() | | y >= get_scene_height()) { move(get_scene_width() / 2, get_scene_height() / 2); xspeed = 0; yspeed = 0; } } public void turnldouble n) { "“(['pl3 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  125. 125. Sample: RocketEntity set_rotation(get_rotation() + n); } public void accelerate(double n) { var angle = get_rotation() - MathConstant. M_PI/2; xspeed += Math. cos(angle) * 1000.0 * n; yspeed += Math. sin(angle) * 1000.0 * n; 99930 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  126. 126. What is a "sprite sheet"? Mobile Game Development Usi nnnnn Ia
  127. 127. Sprite sheet A collection of related images (frames) that are saved as one big image, usually arranged in a grid Often used to provide the frames of a complete animation as a single image file Generic sprite sheet support is implemented in Eqela using the ImageSheet class of com. eqela. libimage crfplc Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  128. 128. An Emfi@. g®Sl: lf:1®®lE with SESpi: >ite / / A sample for sprite sheets: Adapt to your requirements / liking class SpriteSheetEntity : SEMovingSpriteEntity, SEPeriodicTimerHandler { property String sheet_name; property int sheet_rows; property int sheet_cols; property int sheet_images; public void initialize(SEResourceCache rsc) { base. initialize(rsc); double bird_width = 0.25 * get_scene_width(); rsc. prepare_image_sheet(sheet_name, null, sheet_cols, sheet_rows, sheet_images, get_scene_width() * 0.1, get_scene_height() * 0.1); set_image_sheet(rsc. get_image_sheet(sheet_name)); add_entity(SEPeriodicTimer. for_handler(this, 50000)): move(get_scene_width() * 0.5, get_scene_height() * 0.5); } public bool on_timer(TimeVal now) { next_frame(); return (true); Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  129. 129. Layers / / Layers can be used to group sprites together, and to control their stacking order: public class MyScene : SEScene { SESprite bg; SELayer layerl; SELayer layer2; SESprite fgsprite; SESprite player; public void initialize(SEResourceCache rsc) { base. initialize(rsc); var w = get_scene_width(), h = get_scene_height(): bg = add_sprite(Color. instance("#408040“), w, h); layer1 = add_layer(0, 0, w. h); layer2 = add_layer(0, 0, w. h); / / Add a partially transparent black layer on top of everything. fgsprite = layer2.add_sprite_for_color(Color. instance(“#00000080"), w, h); // Any sprites you now add to layerl will be under whatever is on layer2. player = layerl. add_sprite_for_image(SEImage. for_resource("player")); / / For additional effects, try adding moving clouds or other ambient / / graphics on layer2 } public void cleanup() { base. cleanup(); player = SESprite. remove(player); fgsprite = SESprite. removelfgsprite); layer2 = SELayer. remove(layer2); layerl = SELayer. remove(layer1); “ 1 * ~1 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  130. 130. Layers bg = SESprite. remove(bg); la °(| ‘C"‘ Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  131. 131. Activity Recreate your previous activity (create a new project) where the sprite bounces around on the screen: Let the new version work exactly the same way, but implement the bouncing sprite by using an entity class instead. Add a "menu scene" to this game as well with a button that can be clicked to start the game. In the main game scene, create multiple instances of the bouncing sprite when the game starts. Let the user catch the sprites so that if the user clicks on the bouncing sprite, it will be removed from the scene and one "point" will be given to the user. Implement some way of displaying how many points the user has. Make the game randomly add new bouncing sprites to the scene as the game progresses. Qqpla Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  132. 132. Activity (continued) Enhance the previous program: When the bouncing sprite is caught by the player, don't immediately remove the sprite, but instead change the appearance of the sprite to something else (another image) to indicate to the player that it was caught, and let it stop bouncing and stay visible and still for a second or two. Then fade out the sprite (by setting the alpha value gradually towards 0). When fading is complete, then remove the entity and sprite. Implement bouncing sprites with different appearances: Different looking sprites would move at different speeds. Also make some of the sprites require several hits before they are ultimately destroyed (different sprites would have different "hit points"). Qqplc Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  133. 133. Activity Create a game that you would want to make using Eqela You can continue your previous game, or you can start from a new game concept °‘i“l3 Mobile Game Development Using Eqela Copyright (c) 2014 Eqela Pte Ltd
  134. 134. H E? E‘«I¥_E 13:3: l’) E C? E {.3 E L E3 F‘ I’? E H T ¥_¥ 3521 H E4 Copyright (c) 2014 Eqela Pte Ltd
  • FarhanaLuna3

    Jul. 10, 2020
  • AshwaniRoy5

    Mar. 1, 2020
  • JoshuaCario1

    Aug. 26, 2015
  • GladysDianePDy

    Apr. 5, 2015
  • franzmawo

    Nov. 16, 2014

Everything is on mobile now and so is gaming. Game development has shifted from console to mobile, and it is not an easy conversion. We cannot stop it but we can always adapt. Unlike console, mobile comes with several platforms and several versions of each platform. Adapting to different screen sizes is just one of many challenges of developing for mobile. Conquer all these and more. Develop the Impossible! Introducing Eqela multi platform development tool. Eqela allows you to develop once and deploy your application on different platforms while still maintaining your desktop and console presence.

Views

Total views

3,561

On Slideshare

0

From embeds

0

Number of embeds

9

Actions

Downloads

169

Shares

0

Comments

0

Likes

5

×