Lua!

SinisterSoft Limited 329 Preston Road Grimsargh, Preston Lancashire PR2 5JT [email protected] Tel: 01772 369511 Fax: 01772 369522 www.sinisterso...
11 downloads 1 Views 1MB Size
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