Media and Communications
Program Name: Diploma of Interactive Digital Media
Qualification National Code: CUF50207 RMIT Program Code: C5218
Design interaction National Code: CUFDIG506A RMIT Code: VART 5935C
Design Interaction Week 11: Class Exercise
Introduction to JS: Flying Game – TEMPLATE Tutorial
Template Tutorial
Download the supplied FlyingGame_Template.zip file from Blackboard and place it on the Desktop of your computer.
Web Server Setup
We will be using the Python Web Server to test our game in the same way as an end user would play it – via a web browser.
Also, for security reasons, Javascript requires us to run a webserver to access local files. This is a measure built into browsers that prevents malicious code from accessing files across domains. More information is here for those who are interested.
1. Open the Application called Terminal
2. Type the following into Terminal:
Your screen will look something like this:
python –m SimpleHTTPServer
Press enter
You will then see the following message, which indicates the webserver is running:
You can now browse your computer by going to the following URL with your browser: http://localhost:8000
Remember to preview your work today by browsing for it at http://localhost:8000
Game Setup
Simply open the FlyingGame_template folder and you will see it has been organised into the following folders:
Open the main.js file and look at it’s updated coding.
Setup
The new folder setup shows how your video/images/audio/hitboxes should be arranged to be played by your game.
It is important to note your video should be a webm video format. This can be exported using an online converter, such as:
http://video.online-convert.com/convert-to-webm
States
You will see throughout the main.js file provided as a template, the main code that will make your game operable. Consider these as the “chapters” that hold the menus of our game.
It uses a combination of code that runs the gameplay we have been focusing on over the past 8 weeks – as well as code that sets up states for each Chapter of the Overall Game.
You will see these States, have their own create/preload/update functions for the individual assets that are made on those screens. These States create a Boost Menu, Preload/Video Playing Menu, Main Menu, Instructions Menu and GamePlay Menu.
Complete you Game
Now you have the basic template for your Flying Game, you will need to start combining your own assets into the template/code to start things working.
Create your Menu to your desired design, arrange any Sounds you want to play or Text you wish to see on the screens.
Here is a list of things to start to put together over your Mid Semester Break.
Super Fun Mid Sem Break CheckList:
1. Replace ALL Game Sprites with Own Sprites
2. Convert and Render your webm video and replace in game template
3. Design and Implement Menu’s for your Game
4. Add any Sounds / Music you wish to Play in your Game/Menu
5. Start to customise template Code to create your Flying Game
Character SpriteSheet Animations will be implemented in Week 12 onwards.
Tips:
Add in a Win or Lose State to appear when your player collides with an obstacle etc.
If you are unsure of any coding techniques, google phaser.io results or ask others for help.
Remeber, take a look at http://phaser.io/examples and see what is possible with Phaser.