Easy coding a multi-device
game with FireMonkey
Patrick Prémartin
Twitter : @premartinpatric
Email : patrick.premartin@olfsoft.com
www.embarcaderoacademy.com/p/coderage-2018
Agenda
• Introduction
• Setting the project
• Creating sprites and buttons
• Creating the screens
• Do some (simple) code
• Testing on devices
• Conclusion
• Q&A
Introduction
What is FireMonkey ?
• FireMonkey (FMX) is a multi-device framework based on graphic
libraries.
• The same program can be compiled for iOS, Android, macOS and
Windows.
• FireMonkey has RAD capabilities.
It’s simple to use, simple to understand and simple to learn.
• And of course it’s included for free in RAD Studio, Delphi and
C++Builder even in the free Community Edition.
What sort of games can we create ?
• FireMonkey includes 2D and 3D components, Box2D and libraries
usually used by game creators.
• With no programming skills you can create simple games like today.
• With programming skills you can do what ever you want and benefit
from multi-device FMX capabilities.
What will we do today ?
• For Halloween I’ve created the game Pumpkin Killer available on
https://pumpkinkiller.gamolf.fr and the app stores.
• Today we’ll create a game for Christmas based on the same idea :
=> objects move on the screen
=> the player have to touch some of them
• We’ll start the game with 3 lives and no score.
It will end after the lost of last life.
• You can download this game project and use it as a template :
https://vasur.fr/coderage2018src
Setting the project
Setting the project
• Design your game on paper
• Choose, buy or create your assets (images, sounds, musics) :
• title and background image for your game
• an app icon for Windows, macOS, iOS and Android
• a splash screen for iOS and Android
• user interface buttons, sprites and other elements
• Arrange them in a folder tree
• Add a text to remember what you can do with each file and where
they come from.
Setting the project
• Open Delphi or C++Builder
• Create a new multi-device blank application
• Put your icons in “Project / Options / Application / Icons”
• Fill the “Project / Options / Application / Version Info” forms
• Save the project
Creating sprites and buttons
Creating sprites and buttons
• Creating a button component
Creating sprites and buttons
• Creating a button component
• Creating the sprite base
Creating sprites and buttons
• Creating a button component
• Creating the sprite base
• Creating the “good” sprite
Creating sprites and buttons
• Creating a button component
• Creating the sprite base
• Creating the “good” sprite
• Creating the ”bad” sprite
Creating the screens
Creating the screens
• For a simple game we need 6 screens : home, game, game over, hall
of fame, options and credits.
Creating the screens
• For a simple game we need 6 screens : home, game, game over, hall
of fame, options and credits.
• The simple way is to use a TLayout for each screen on the same
TForm.
• The background of the game will be the background bitmap on the
TForm. It can stretch to the good size.
• In our game we put the title image on the TForm.
If you prefer you can put it on some TLayout or change it’s visible
property depending on the screen displayed.
Do some (simple) code
Do some (simple) code
• The first thing to do is to add link between the screens. We use
onClick event on the buttons.
Do some (simple) code
• The first thing to do is to add link between the screens. We use
onClick event on the buttons.
• On Android we need to intercept the “back” button of the phone or
tablet. We use onKeyDown event on the TForm.
For Windows and Mac we intercept the ESC key in the same event.
Do some (simple) code
• The first thing to do is to add link between the screens. We use
onClick event on the buttons.
• On Android we need to intercept the “back” button of the phone or
tablet. We use onKeyDown event on the TForm.
For Windows and Mac we intercept the ESC key in the same event.
• To store and display the scores we add a TDataModule unit with
some properties and a TFDMemTable.
We add a link between it and the Hall of Fame screen with Live
Bindings.
Do some (simple) code
• Now we can animate the sprites :
• Initialize their properties on create
• Fill the onClick event (increase score, decrease life, enable the animation)
• Move the sprites and test when they exit the screen
Do some (simple) code
• Now we can animate the sprites :
• Initialize their properties on create
• Fill the onClick event (increase score, decrease life, enable the animation)
• Move the sprites and test when they exit the screen
• Working on the game screen :
• Initialize the game properties
• Add the code needed when the score changes
• Add the code needed when the number of lifes changes
• Add the game loop (add, kill and move the sprites)
Do some (simple) code
• And we finish with the game over screen :
• Store the score if the user wants it
• Display the hall of fame
Testing on devices
Testing on devices
• Compile and run the game on Windows
Testing on devices
• Compile and run the game on Windows
• Compile and run the game on Android
Testing on devices
• Compile and run the game on Windows
• Compile and run the game on Android
• Compile and run the game on macOS
Testing on devices
• Compile and run the game on Windows
• Compile and run the game on Android
• Compile and run the game on macOS
• Compile and run the game on iOS
Conclusion
Conclusion
• Now you have a simple game template you can modify as you want.
• As you can see FireMonkey is a simple framework to play with. J
• We are waiting for your games…
Recap
• Introduction
• Setting the project
• Creating sprites and buttons
• Creating the screens
• Do some (simple) code
• Testing on devices
• Conclusion
• Q&A
• Patrick Prémartin
Twitter : @premartinpatric
patrick.premartin@olfsoft.com
• My blog :
https://developpeur-pascal.fr
• Download this project on:
https://vasur.fr/coderage2018src
www.embarcaderoacademy.com/p/coderage-2018

Easy coding a multi device game with FireMonkey

  • 1.
    Easy coding amulti-device game with FireMonkey Patrick Prémartin Twitter : @premartinpatric Email : patrick.premartin@olfsoft.com www.embarcaderoacademy.com/p/coderage-2018
  • 2.
    Agenda • Introduction • Settingthe project • Creating sprites and buttons • Creating the screens • Do some (simple) code • Testing on devices • Conclusion • Q&A
  • 3.
  • 4.
    What is FireMonkey? • FireMonkey (FMX) is a multi-device framework based on graphic libraries. • The same program can be compiled for iOS, Android, macOS and Windows. • FireMonkey has RAD capabilities. It’s simple to use, simple to understand and simple to learn. • And of course it’s included for free in RAD Studio, Delphi and C++Builder even in the free Community Edition.
  • 5.
    What sort ofgames can we create ? • FireMonkey includes 2D and 3D components, Box2D and libraries usually used by game creators. • With no programming skills you can create simple games like today. • With programming skills you can do what ever you want and benefit from multi-device FMX capabilities.
  • 6.
    What will wedo today ? • For Halloween I’ve created the game Pumpkin Killer available on https://pumpkinkiller.gamolf.fr and the app stores. • Today we’ll create a game for Christmas based on the same idea : => objects move on the screen => the player have to touch some of them • We’ll start the game with 3 lives and no score. It will end after the lost of last life. • You can download this game project and use it as a template : https://vasur.fr/coderage2018src
  • 7.
  • 8.
    Setting the project •Design your game on paper • Choose, buy or create your assets (images, sounds, musics) : • title and background image for your game • an app icon for Windows, macOS, iOS and Android • a splash screen for iOS and Android • user interface buttons, sprites and other elements • Arrange them in a folder tree • Add a text to remember what you can do with each file and where they come from.
  • 9.
    Setting the project •Open Delphi or C++Builder • Create a new multi-device blank application • Put your icons in “Project / Options / Application / Icons” • Fill the “Project / Options / Application / Version Info” forms • Save the project
  • 10.
  • 11.
    Creating sprites andbuttons • Creating a button component
  • 12.
    Creating sprites andbuttons • Creating a button component • Creating the sprite base
  • 13.
    Creating sprites andbuttons • Creating a button component • Creating the sprite base • Creating the “good” sprite
  • 14.
    Creating sprites andbuttons • Creating a button component • Creating the sprite base • Creating the “good” sprite • Creating the ”bad” sprite
  • 15.
  • 16.
    Creating the screens •For a simple game we need 6 screens : home, game, game over, hall of fame, options and credits.
  • 17.
    Creating the screens •For a simple game we need 6 screens : home, game, game over, hall of fame, options and credits. • The simple way is to use a TLayout for each screen on the same TForm. • The background of the game will be the background bitmap on the TForm. It can stretch to the good size. • In our game we put the title image on the TForm. If you prefer you can put it on some TLayout or change it’s visible property depending on the screen displayed.
  • 18.
  • 19.
    Do some (simple)code • The first thing to do is to add link between the screens. We use onClick event on the buttons.
  • 20.
    Do some (simple)code • The first thing to do is to add link between the screens. We use onClick event on the buttons. • On Android we need to intercept the “back” button of the phone or tablet. We use onKeyDown event on the TForm. For Windows and Mac we intercept the ESC key in the same event.
  • 21.
    Do some (simple)code • The first thing to do is to add link between the screens. We use onClick event on the buttons. • On Android we need to intercept the “back” button of the phone or tablet. We use onKeyDown event on the TForm. For Windows and Mac we intercept the ESC key in the same event. • To store and display the scores we add a TDataModule unit with some properties and a TFDMemTable. We add a link between it and the Hall of Fame screen with Live Bindings.
  • 22.
    Do some (simple)code • Now we can animate the sprites : • Initialize their properties on create • Fill the onClick event (increase score, decrease life, enable the animation) • Move the sprites and test when they exit the screen
  • 23.
    Do some (simple)code • Now we can animate the sprites : • Initialize their properties on create • Fill the onClick event (increase score, decrease life, enable the animation) • Move the sprites and test when they exit the screen • Working on the game screen : • Initialize the game properties • Add the code needed when the score changes • Add the code needed when the number of lifes changes • Add the game loop (add, kill and move the sprites)
  • 24.
    Do some (simple)code • And we finish with the game over screen : • Store the score if the user wants it • Display the hall of fame
  • 25.
  • 26.
    Testing on devices •Compile and run the game on Windows
  • 27.
    Testing on devices •Compile and run the game on Windows • Compile and run the game on Android
  • 28.
    Testing on devices •Compile and run the game on Windows • Compile and run the game on Android • Compile and run the game on macOS
  • 29.
    Testing on devices •Compile and run the game on Windows • Compile and run the game on Android • Compile and run the game on macOS • Compile and run the game on iOS
  • 30.
  • 31.
    Conclusion • Now youhave a simple game template you can modify as you want. • As you can see FireMonkey is a simple framework to play with. J • We are waiting for your games…
  • 32.
    Recap • Introduction • Settingthe project • Creating sprites and buttons • Creating the screens • Do some (simple) code • Testing on devices • Conclusion • Q&A
  • 33.
    • Patrick Prémartin Twitter: @premartinpatric patrick.premartin@olfsoft.com • My blog : https://developpeur-pascal.fr • Download this project on: https://vasur.fr/coderage2018src www.embarcaderoacademy.com/p/coderage-2018