For many years I made games using DelphiX and later DanJetX and OmegaDX9. Smart Mobile Studio represents an awesome opportunity to create games and animated graphics for browsers, tablets and phones. Initially I thought it would be a breeze converting some of my older games to SMS but I quickly ran into a myriad of challenges. Mainly due to my lack of understanding.
I set about trying to make a demo that demonstrated techniques that I need in order to port some of my games. First I tried running as many demos as I could but all of them lacked elements of what I needed. I found the missile command demo very useful although due to a lack of documentation it can be difficult to understand certain parts of it. The Missile Command demo lacked a number of important elements. There was no keyboard interaction and none of the sprites were being rotated or otherwise manipulated.
I have managed to solve my challenges because Jon and others, here on the forum, are patient enough to answer some of my questions. For that reason I decided to post my Game Demo here and also explain a few of the challenges that I encountered so that others can learn from it.
Canvas vs. Form
You can create a game in either canvas mode or using a tW3form. The canvas is faster and similar to a DirectX surface and the Form is the equivalent of using a Delphi Form with VCL components. Use the canvas.
SpriteSheet - the easiest way to animate a sprite is to use a spritesheet that contains all the animation frames.
Rotation - This was a real bugbear for me. How to rotate the image on the screen. It turns out to be pretty simple but there were no examples available that demonstrated this techinque.
Here is an example. The spritesheet is 3x3, i.e., there are 9 cells of animation. The current cell is drawn to the canvas. In this code the missile is drawn with the ability to be rotated. First we save the canvas's current settings. We then translate the point of origin to the centre of the image (cell). Each cell is 32x32 pixels so we step in 16 from the left and top. Now we rotate to the current angle and draw the image to the screen. Finally we restore the canvas to its saved state.
var missile : TMissile;
for missile in FMissiles do
var idx := missile.Frame mod 9;
(idx mod 3)*32, (idx div 3)*32, 32, 32,
note: the graphics resources appear to be case insensitive when you run from the IDE. However, make sure you use the correct case when referencing the graphics files otherwise you will have errors when you open the index.html on your website.
Keyboard - the game examples that I found were all mouse friendly and did not require keyboard interaction. For my demo I want to be able to move a spaceship around using the arrow keys and be able to fire using the space bar.
It turns out that the keydown and keyup events are not functioning correctly in SMS. I had to use Sascha's work around to get those events to work
// keydown doesn't work at the present time this little work around solves the problem
It is possible to respond to the keys in the keydown event. The problem is when the player is holding down the space bar to shoot and then they hit one of the arrow keys. Now the spacebar is no longer sending a keydown event. The work around is to store when a key goes down and when it comes back up. If the player holds down the spacebar the Shooting boolean is set, when they let go the keyup event sets the shooting boolean back to false. This system works nicely.
I based my demo on the Missile Command demo as it was nicely set up and I could learn some new programming techniques. However, unlike that demo I did not want my Game Demo to be limited to a certain Frame Per Second. Instead I used the LastFrameTime to calculate distances etc. So all sprites move on a basis of pixels per time.
I hope this Games Demo helps people over come some basic challenges and I would be keen to hear feedback.
Note: I am using current beta RTL - unsure if it will compile with older RTL.
GameDemo - live