Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

My first game - a tutorial for absolute beginners

edited June 2013 in Code Sharing Posts: 737

Following chat in previous threads I've put together a (hopefully) super simplistic example for creating a lunar lander game. I would love to hear feedback on it, particularly from beginners as to how easy it is to use, understand, follow and how useful it is. I've added a few suggested challenges as potential next steps once you've understood the basics.
Video of gameplay:


-- Noob Lander -- by West -- This is a very simple example lunar lander game. It is intended for use as an introduction into creating your first game in codea and is aimed at absolute beginners. --The game was built using the following steps: --1. Place the ship sprite on the screen at a pre-defined position (use one of the pre-loaded sprite packs) --2. Add x, y and shipsize variables to set up and use these to position the sprite. Try different values of x,y and shipsize --3. Set y=HEIGHT-100 and x=WIDTH/2 to position the ship near the top centre of the screen. A default shipsize of 25 works well --4. Add a y=y-1 in the draw loop (ship should move down the screen). --5. Add in a tap function - if the current touch is BEGAN or MOVING then draw a second "Thruster jet" sprite at the x, y-offset location --6. Modify 4 to introduce gravity --7. Add thrust when the screen is touched. This should be factored into the equations of motion --8. Draw a line to represent the ground --9. Test to see if the ship has gone below the line (this will be a test on the y coordinate plus an offset equal to half the height of the sprite). If it has, test the current speed of the ship - too fast then crash otherwise win --10. Implement the "Crash" and "Win" screens --11. Add a fuel parameter - can only thrust if there is fuel in the tank. Display current fuel on the screen --12. Add sounds for thrust and explosions -- I've tried to associate comments with most of the steps but the program is the result after all 12 have been implemented. I could separate out the code if there was real interest in a broken down step by step tutorial. -- Code modification challenges --These are aimed at taking this code and tweaking it to see the effects --1. Double the size of the ship --2. Change the level of the ground --3. Decrease the amount of fuel you start with --4. Make it harder by reducing the fastest speed at which you can land. at the moment this is hard coded - can you make this a parameter which is set in setup? --5. Turn the ground into a solid filled rectangle which extends to the bottom of the screen --Code addition challenges -- These are aimed at improving the code by adding extra functions. Please share your updates on the forum to help/inspire others --1. Add a starfield to the background --2. Turn the thrust into a spray of particles.. --2b ..that bounce off the ground and fade with time --3. Add a start screen --4. Add a high score table --5. change the controls to use tilting the ipad for thrust --6. Add horizontal thrusting (and a safe landing area) --7. implement the graphics as a sprite sheet using meshes (this may be required to keep the performance up if you have a starfield and particle based thrust) --Test yourself! --Can you take the 12 steps above and without looking at the code implement a version of the lander game? --Hide the sidebar from the screen displayMode(FULLSCREEN) -- Use this function to perform your initial setup function setup() --2. add x and y variables and use to position the sprite x=300 --x position of the centre of the ship on the screen y=300 --y position of the centre of the ship on the screen --set up a parameter to hold the size of the ship sprite in pixels assume the ship image is a square so the width and height of the ship are the same shipsize=25 --3. position ship near top of screen x=WIDTH/2 --x position of the ship on the screen - set to half the width of the screen y=HEIGHT-100 --y position of the ship on the screen - set to the height of the screen minus 100 pixels --10. Set up a simple finite state machine which will control what parts of the program are run. Finite State Machine sounds fancy but all it means is that there is a limited number of known states (finite) which can be swapped between by some program (machine) --setting CONSTANT parameters makes for more meaningful code, and by convention CONSTANTS are written in captials (WIDTH and HEIGHT are special types of constant) --The three possible states are as follows PLAYING=1 CRASHED=2 LANDED=3 --set up a parameter which will hold the current state of the game gamestate=PLAYING --8. set a parameter to hold the level of the ground in pixels from the bottom of the screen groundlevel=50 --6. set a parameter to hold the speed of the ship speed=0 --6. set a parameter to hold the strength of gravity gravity=-0.02 --6. set a parameter to hold the level of thrust of the ship thrust=0 --11.set a parameter to hold the fuel level fuel=500 end -- This function gets called once every frame function draw() --This sets a dark background color background(40, 40, 50) -- 1. display the ship sprite on the screen --sprite("Space Art:Red Ship",300,300) --10. if the current state of the game is playing then do the following if gamestate==PLAYING or gamestate==LANDED then --5. Thrust sprite - want this to appear behind spaceship so draw before it --test to see if the screen is being touched if (CurrentTouch.state==BEGAN or CurrentTouch.state==MOVING) and gamestate==PLAYING and fuel>0 then --draw the flames from the ship sprite("Tyrian Remastered:Flame 2",x,y-shipsize,shipsize,shipsize) --increase the thrust thrust = thrust + 0.005 --reduce the fuel level fuel = fuel -1 --12. play a thrust sound sound(SOUND_HIT, 16609) --limit the thrust to a maximum level if thrust>0.05 then thrust=0.05 end else --the screen is no longer being touched so remove the thrust thrust=0 end --2 add x and y variables and use to position the sprite and a variable to set the size of the sprite sprite("Space Art:Red Ship",x,y,shipsize,shipsize) --4. Move ship down the screen --y = y -1 --6. and 7. add gravity and thrust -- use variable a to calculate the difference between the amount of thrust and gravity (equivalent of acceleration) a=gravity+thrust --alter the speed of the ship speed=speed+a -- add terminal velocity constraint - sets a maximum speed for the ship --a positive speed means upward travel, the larger the speed then the faster the upward speed --a negative speed means downward travel. The more negative the speed, the faster the ship moves down the screen if speed<-3 then speed=-3 end --use this version of the equation of motion to calculate the distance to move the ship in the y direction between frames y=y+speed+0.5*a --10. if the game state has been set to crashed then draw the explosion and show a message() elseif gamestate==CRASHED then --add the explosion sprite to the screen at the ship position. Each frame add adjust the size of the ship by a random amount - this will give a wobbly explosion effect sprite("Tyrian Remastered:Explosion Huge",x,y,shipsize+math.random(10),shipsize+math.random(10)) text("Crash",WIDTH/2,HEIGHT/2) end -- --8.draw line representing the ground --set the thickness of the line strokeWidth(3) --set the colour of the line stroke(48, 216, 25, 255) --draw the line at the level set by the groundlevel parameter line(0,groundlevel,WIDTH,groundlevel) --9. check to see if the y position of the ship is less than the ground level to see if the ship has reached the ground. --note that we need to take into account the height of the sprite as the y vale is the centre of the ship sprite if y-shipsize/2<groundlevel then --the ship has reached the ground so check to see what speed it was travelling at --the speed must be negative because the ship is moving down towards the ground. --if the speed is slow (close to zero) then have a successful landing if speed>-1 then text("Landed",WIDTH/2,HEIGHT/2) --10 change the gamestate to landed gamestate=LANDED --otherwise the ship is travelling too fast and has crashed else --12. play an explosion sound sound(SOUND_EXPLODE, 23062) --10.change the state of the game to crashed gamestate=CRASHED end --set the position of the ship to rest on the ground. It is possible that the ship will have overshot the ground level as when travelling fast the ship can cover more than 1 pixel at a time between frames y=groundlevel+shipsize/2 --set the speed and thrust of the ship to 0 speed=0 thrust=0 end --11. print out the current fuel level --pick a font font("Courier-Bold") --set the size of the font fontSize(30) --print in the top left corner of the screen. Use .. to join bits of string tp parameters text("Fuel:"..fuel,150,HEIGHT-50) end

Comments

  • Jmv38Jmv38 Mod
    Posts: 3,295

    Nice! Maybe a right/left thrust?

  • Posts: 737

    Yes - it's in there as code addition challenge number 6! The idea is that beginners could use this as an introduction to codea.

  • Jmv38Jmv38 Mod
    edited June 2013 Posts: 3,295

    Oh! Sorry, i didnt read the comments and challenges. Clearly this 'unfinished' app is a good idea to motivate beginners, because it really itches to let it unfinished!
    Maybe: put the starting position of the ship at HEIGHT/2, because in landscape the ship disappears almost immediately. (or was it in the challenge list too?)

  • Posts: 737

    Sometimes the game starts with currentTouch active. I wasn't sure of a quick way to reset this without going into a proper touch handler. The ship should start near the top and fall to the ground if left untouched rather than starting with thrust which is what I guess you're encountering.

  • Jmv38Jmv38 Mod
    Posts: 3,295

    You are right, the real pb is that the trust is active when i start.

  • Posts: 18

    Great, thanks that you created this tutorial.

  • BriarfoxBriarfox Mod
    Posts: 1,542

    These would be great to have added to the wiki. I've always been a fan of bare bones games that give you goals since im not much of the creative type.

  • Posts: 418

    For a complete noob, I don't think this is the right thing. Its like someone telling them the basic plot of a story in english and then having them write it in a whole new langue they don't understand. I din't find it to be much use myself because I think that my learning is past that point.

    These are my thoughts, and thank you for doing something to help noobs learn.

  • Posts: 140

    @West, thanks!!!! This is an excellent, working tutorial. I wish more contributors (of the expert group) had time to include this type of step-by-step instruction. Even though I've learned a lot from all of the samples, I often have no clue what's going on--just looking at the code. This is perfect for a Codea hobbyist like me.

  • Posts: 737

    @Goatboy76 thanks for your thoughts. Any thoughts on what would be the right thing?

    @Ric_Esrey - thanks - glad you're finding it of use

  • Posts: 455

    I know this is for newbies, but it's quite a nice inspiration and something to play with. So far converted it to 2d, thrusts towards the touch point.

  • Posts: 737

    @spacemonkey I'm glad your getting something from it! I'd be interested in which direction your taking it. I've been playing about with it too - put in tilt controls and a particle based thrust.

    Video of WIP:

  • IgnatzIgnatz Mod
    Posts: 5,396

    @west - I think what Goatboy76 may be saying is that while the game may relatively simple, there is a lot of code and comments, and some of the concepts and the language may be foreign to relative beginners.

    One approach I have tried is to write a game like this as a series of completely separate (ie separate tabs) levels or layers, which increase in complexity. The first level might just draw the rings and background. The next level might add the bee. The more you can break the game down into little bits, the easier it is to digest and understand.

    It's a bit like reading a textbook. You need an overview first, then a good outline of all the key points and structure, and then all the detail.

    Just my thoughts. Thanks for all the effort.

  • Posts: 737

    @Ignatz yes I mentioned a step by step approach in the code for lander above (I thought it was much simpler than the bee side scroller). It's finding time to write and the correct presentation approach. Like the idea of the tabbed approach - thanks!

  • IgnatzIgnatz Mod
    Posts: 5,396

    You could use the approach in the physics lab, where there is a table of tabs and the user picks which one applies. This would enable you to have a series of tabs with all the same functions, just getting more complex as they go.

    I did my own version of this to explain how to bounce balls round the screen, here

    http://pastebin.com/pa9wgLCB

  • edited June 2013 Posts: 37

    Good game...

  • Posts: 737

    @Ignatz I like the idea but have the concern that the code required to launch the different tabs would be more complex for the beginner to understand than just the code. Good idea though so I'll think on it a bit more.

    @Kingamer - that would be excellent - would love to see what you've done

  • IgnatzIgnatz Mod
    Posts: 5,396

    The beginner would only have to understand the actual tabs, not the main tab driving them.

    To run any of the tabs on their own, all they have to do is copy them to a new project and remove the tab prefixes on the function names.

    I think this is better than giving them a large block of code that might intimidate them. I've been programming a long time, and I still found myself thinking twice about ploughing into it, whereas if you break it into sections, it can be understood more easily.

    But it's up to you, of course!

  • Posts: 455

    @West the thing I'm playing with is how you control, and rather than the more traditional tilt left and right and thrust, I went for auto tilting to face whereever you touched and thrust so it's still single touch driven.

    The down side is your finger is over the screen so it's harder to see, but it's very controllable and intuitive in terms of keeping it under control.

    I'm not sure where I want to take it, but I'm thinking a land and then return to mothership style gameplay, then for levels could play with different styles, eg land during a meteor storm, land when planetary forces are shooting at you, go down into a cave system to land. So a mix of level types. Could even do things like refueling etc...

  • Posts: 37

    @West Ok I see what I can do

  • Posts: 140

    @Spacemonkey, you might be on track for the next Angry Birds-type game. For instance, you could eventually have enemy spaceships shooting from the sides that you would have to dodge while you land. Then you could award one, two, or three stars to give the player an idea of how well he did--after each level.

  • Posts: 737

    OK, have an updated approach to the tutorial. The end code is the same but it is now split into 12 steps, each one building on the last. Internal comments only refer to the new code in each step.
    Each step is a stand alone tab, and to run a chosen step move its tab to the far right position and press run.

    Select and Copy the whole code from here:
    https://gist.github.com/Westenburg/5799558

    Then In Codea, long press on add a new project and select "Paste into project"

  • Posts: 37

    @West Hey, I thought I'd let you know I updated the game alot since yesturday so I will make a video of the updated version today or tommorow

  • Posts: 737

    Cool - look forward to seeing what you've done

  • BriarfoxBriarfox Mod
    edited June 2013 Posts: 1,542

    Wait for the crash, the smoke effect is cool. Stars are randomly generated. Platform has random size and location.

  • edited June 2013 Posts: 737

    Good job @Briarfox - the explosion at the end is pretty cool. You've had a good go at most of the challenges too.

    To embed use /watch?v= followed by the code instead of /embed/ in the YouTube url

Sign In or Register to comment.