SinisterSoft Limited 329 Preston Road Grimsargh, Preston Lancashire PR2 5JT
[email protected] Tel: 01772 369511 Fax: 01772 369522 www.sinistersoft.com
A beginner’s guide to creating handheld video games in Gideros / Lua!
Registered in England & Wales. Registration Number: 07856363. Registered Office: 329 Preston Road, Grimsargh, Preston, Lancashire. PR2 5JT
A beginner’s guide to creating handheld video games in Gideros / Lua!
How can I get started writing video games for my phone or tablet? You will need a development system. There are many different types of development system some costing thousands of pounds. My favourite one at the moment is a free one… it’s called Gideros! What is Gideros? Gideros is a complete development system that allows you to edit video game code, include assets such as graphic and sound files, and finally test using an emulator. Gideros can also generate all the files for you to publish your game on the various app stores, such as the Apple AppStore, the Google Play Store, the Amazon AppStore, etc. Gideros can be installed on either a Windows PC or an Apple Mac computer. http://GiderosMobile.com With Gideros you program your game using a fairly new and easy to learn computer language called Lua. What is Lua? Lua is the fastest of the scripting languages. It is similar to, but much faster than Python or Basic. Although Lua is fast, there is a JIT (just in time) version of Lua called LuaJIT which is up to 90 times faster. LuaJIT will be added to Gideros sometime during 2013. Lua is ideal for writing computer games on handheld devices because your computer game ‘prototype’ can be run on your device almost immediately. Lua is also portable, this means that a computer program written in Lua should run on a variety of different handheld devices with little or no modification.
©2013 SinisterSoft Limited, all rights reserved.
Page 1
A beginner’s guide to creating handheld video games in Gideros / Lua!
What does Lua ‘code’ look like? Here is an example of some Lua code: print("Hello World")
This will output the text “Hello World” to the debug console windows on your computer. What is the debug console? The debug console is a handy window that you can send messages to at various points within your video games so you can see what is going on ‘behind the scenes’. How do I get started using Gideros then? First download Gideros from the GiderosMobile.com website and install it. Then start Gideros… Then click “Create New Project”… A window will appear, change the text that says “New Project” to the name of your game… eg “MyGame” then click “OK”…
©2013 SinisterSoft Limited, all rights reserved.
Page 2
A beginner’s guide to creating handheld video games in Gideros / Lua!
Now right‐click the project’s name in the editor and select “Add New File…” Call the new file “main.lua”…
Within the “main.lua” file, enter this text: print(“Hello World”)
Now click the “Player” menu and select “Start Local Player”… The player “emulator” will appear, I’ll explain this more later…
©2013 SinisterSoft Limited, all rights reserved.
Page 3
A beginner’s guide to creating handheld video games in Gideros / Lua!
Now click the “Player” menu again and select “Play”… In the output part of the editor you should see “Hello World”. Congratulations! You have now written your first piece of code. That’s ok, but I want to do something more exciting! Now we know how to create a project, enter code and get it to play and see some results. Let the fun begin… Replace the text in “main.lua” with this text (exactly!):
Then click “Play” again. You should see a pink box that is 100 pixels square, it should be 50 pixels in from the top and left sides of the emulator. If you don’t see this then double check what you have typed and try again. ©2013 SinisterSoft Limited, all rights reserved.
Page 4
A beginner’s guide to creating handheld video games in Gideros / Lua!
What is a Pixel? A pixel represents a single dot on the screen. On most modern devices you can colour the pixel to any of 16 million colours, this is often referred to as 24‐bit colour. How do I play this on my own phone or tablet? If you have an Android phone then go to your settings and click “Security”. Make sure that the “Unknown sources” option is ticked. Now open up a browser and enter this URL, make sure you spell the upper and lowercase letters correctly:
http://SinisterSoft.com/downloads/GiderosAndroidPlayer.apk Your device will download the player, now find downloads on your device (you may be able to just swipe down), click the file you just downloaded and select “Install”. Once installed, click “Open”. Once the player starts you should see the Gideros version number in the top left of the screen, this should match the version of Gideros you have on your computer. You should also see “Local IP Info” and 4 numbers separated by dots, this is the IP address of the player. In the Gideros editor click the Player menu and select “Player Settings”. Untick “Localhost” and enter the IP address of your device in the space provided, don’t forget to enter the dots!
©2013 SinisterSoft Limited, all rights reserved.
Page 5
A beginner’s guide to creating handheld video games in Gideros / Lua!
When you have everything setup correctly then you should see that the play button is enabled in the Gideros toolbar. If you want to go back to using the emulator then tick “Localhost” in the player settings. You can install a player on the iPhone/iPad, but it’s a more complicated process and requires an Apple account. I only see a small screen on my device? Different phones and tablets display a varying number of pixels across and down the screen, this is called resolution. Gideros default resolution values are setup to 320 x 480 pixels. This is the resolution of the original iPhone. When drawing to your more modern device this may appear quite small. Fortunately you can change a setting so that the screen is scaled up to your device. Right‐click on your game’s project name. Select “Properties”.
Click the “Scale Mode” selector, choose “Stretch”. Stretch mode will stretch the game screen across the game screen.
©2013 SinisterSoft Limited, all rights reserved.
Page 6
A beginner’s guide to creating handheld video games in Gideros / Lua!
There is way of selecting the stretch mode programmatically, place this line at the top of you code: Please explain the “code”… The first line “shape = Shape.new()” creates a Shape object that we are calling “shape”. We could have called it anything, eg: “fred = Shape.new()” – but it’s easier to keep track of things if we use names that are familiar. The next line “shape:setFillStyle(Shape.SOLID, 0xff0000, 0.5)” will set the fill style so it’s solid with a colour of 0xff0000 which is the hex number for red, the 0.5 means it’s semi‐transparent. What is Hex? Hex is short for “Hexadecimal”, that is a base 16 number. Unlike the number digits you might be used to (0 to 9), computers can use different number bases as it’s often more convenient. Hex numbers go from 0 to f (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f) with ‘f’ being 15. If you go past f then you increase the next digit and go back to 0, e.g. 16 decimal is 10 in hex. You know a number is in hex in one of two ways, you start it with a 0x or you start it with a $, so 0x10 and $10 both represent the decimal number 16. Gideros understands the “0x” method. Please explain the “code”… Part 2! The next 6 lines describe the shape from beginning to end, the shape starts at 0,0 (top left), a line is drawn to 100,0 (top right), the line is
©2013 SinisterSoft Limited, all rights reserved.
Page 7
A beginner’s guide to creating handheld video games in Gideros / Lua!
then drawn to 100,100 (bottom right), then again to 0,100 (bottom left). The next line adds the shape we have created to the “stage”. What is the stage? The stage is what Gideros calls the screen. If something is on the stage then it will most likely be visible to the user. Please explain the “code”… Part 3! The last line simply changes to position of the shape to 50,50. Seems a lot of code just to make just one box… Yes it is, but let’s make a few adjustments so that we can easily make as many boxes as we like. Edit the code to look like this: Now play this code…
©2013 SinisterSoft Limited, all rights reserved.
Page 8
A beginner’s guide to creating handheld video games in Gideros / Lua!
It does exactly the same thing! Yes, but by creating a “box” function it allows us to created boxes of any size and colour easily. Add the following lines to the end of the code: Now play this code… How do I control the colour? I don’t understand 0xff0000… The colour is contained in the hex number, the first 2 hex digits are the red component, the next two are the green component and the last two are the blue component.
0xRRGGBB Each component can go from $00 (or 0x00) to $ff (or 0xff). To make new colours you can mix them, e.g. 0xffff00 is yellow, 0xff8000 is orange, 0x8000ff is purple, 0xffffff is white, 0x000000 is black, etc Try changing the code to make different coloured boxes. The reason why hex is used is because each primary colour can have one of 256 different values ($00 to $ff) which is very convenient to show in hex, if this was a decimal number then we would have to use a formula like: ( R x 65536 ) + ( G x 256 ) + B Not as “nice” as the hex version!
©2013 SinisterSoft Limited, all rights reserved.
Page 9
A beginner’s guide to creating handheld video games in Gideros / Lua!
Does the box always have to be transparent? No, we can make some more improvements to the “box” function… Now you can add an extra number to the end of creating a box to specify the amount of transparency. Adding a 0 would be completely transparent and a 1 would be completely solid. e.g. myBox1=box(100,100,0xff0000,0.75) 75% solid red colour Note that the transparency value is optional, we check to see if it there, if it isn’t then we set it to 0.5 (50% transparency). Does the background have to be White? No, we can set the background to any colour. Seeing as most video games have a black background, let’s change it to Black. Add this line at the beginning of the program, then play it:
©2013 SinisterSoft Limited, all rights reserved.
Page 10
A beginner’s guide to creating handheld video games in Gideros / Lua!
Can we make things move? Yes, we can. First we need to make sure our code will play as fast as possible by setting the “frame rate”. Arcade games normally run at 60 frames per second, so we will set ours to 60 too. To do this add “application:setFps(60)” to the top of your code. It should look something like this: Now edit your code by deleting everything below the box function and replace it with this code, then play it:
By adding an “event listener” we can wait for a specific event. There are lots of different types of event, but this one adds one to the “stage” that waits for it to start drawing the video “frame” – in other words it waits for the screen to be updated. In the event we add one to the X position of the ball to make it move to the right and eventually off the screen. ©2013 SinisterSoft Limited, all rights reserved.
Page 11
A beginner’s guide to creating handheld video games in Gideros / Lua!
How do I make the ball bounce from side to side? We can easily make the ball do this by doing a comparison then changing direction if one of the sides has been hit. Edit the code under the box function to look like this, then play it:
Want the ball to go up and down too? Then make these edits:
©2013 SinisterSoft Limited, all rights reserved.
Page 12
A beginner’s guide to creating handheld video games in Gideros / Lua!
Can I add things like gravity? We can use something called “box2d” to Gideros to add physics to objects. Box2d is what a company called Rovio used to create the Angry Birds games. First replace the lines before the “box” function with these, do not play it though as there are more changes to be made:
What this does first is to include the “box2d” system in your code. After setting the screen update speed and making the screen black it sets up the number of pixels per metre for the Physics system. The “sprites={}” sets up a new list or array of objects that we will call “Sprites”. I’ve heard of sprites before! Sprites is a common name in video games for objects that move on the screen. In the “old days”, there were limits on maximum number of sprites per screen line or on screen at once.
©2013 SinisterSoft Limited, all rights reserved.
Page 13
A beginner’s guide to creating handheld video games in Gideros / Lua!
The code then shows the game “world” being setup, an invisible solid edge at the bottom of the screen is so sprites don’t fall off! Adding gravity… Part 2! Now replace the box function with this new updated version:
This adds physical properties to our box shapes, note that the box is now drawn from the centre of the box using negative coordinates. ©2013 SinisterSoft Limited, all rights reserved.
Page 14
A beginner’s guide to creating handheld video games in Gideros / Lua!
Adding gravity… Part 3! Now replace the lines below the box function with these, double check your code to make sure it is correct and then click play.
This will draw 3 large boxes that will fall down the screen, if they hit another box then they will collide and alter direction slightly. At the beginning of the “onEnterFrame” function, I have localised some math functions ‐ this will make them run faster when they are used later on in the function. I’ve also pre‐worked out 180/pi to speed things up too. When writing video games you try to make everything as fast as possible. The faster you make your code run then the more objects you can have on screen without any slow‐down. You should try make sure that you pre‐calculate as much as possible before code loops or pieces of code that occur frequently.
©2013 SinisterSoft Limited, all rights reserved.
Page 15
