Computer Science 486 Mobile and Internet Game Development
Study Guide :: Unit 9
3D and Game
Overview
Unit 9 demonstrates how to use three.js to create 3D text and geometry. In any game, a physics engine is important for collision detection, acceleration, and free-falling. This unit will talk cannon.js, which is a well-designed physics engine inspired by three.js. At the end, a free open-source HTML5 game framework, Phaser, is introduced, and you will find how easy the development of a browser-based game is.
Learning Objectives
After completing this unit, you will be able to:
- Create 3D text and geometry.
- Create a world with a physics engine.
- Implement an arcade-type shooting game.
Learning Activities
- First, read Unit 9 notes.
- Second, read the Unit Exercise below in this unit:
- Choose any exercise and try to complete it.
- Use the course discussion board to post your experience and solution to any one of the exercises.
- Comment and make suggestions on another student’s posting.
- Answer any questions posed to you.
- Third, complete Assignment 2 and submit it on Moodle.
Lesson Notes
- With three.js, you can create 3D objects on the canvas, such as the rotating 3D cube example you tried in Unit 8. Sometimes we also need to have 3D text shown on the screen. When this happens, you can use three.js to fulfill the goal. Please read “Creating Text” (https://threejs.org/docs/index.html#manual/introduction/Creating-text) and take a look at the “canvas/geometry/text” example and its source code.
- Besides 3D text, with the help of three.js, we can also use different geometry classes to create 3D objects in the virtual world on browser. Please go to https://threejs.org/examples/#webgl_geometries and click View Source in the bottom-right corner to see how simple different 3D objects can be created and added to the scene with Mesh and different geometry classes.
- Although three.js can help to create authentic 3D world like the car example (https://alteredqualia.com/three/examples/webgl_cars.html) shows, it has no physics engine to support collision detection. If you try to move one car with WASD or arrow keys to collide with the other car, you will see that nothing happens.
- Most of games need a physics engine. Inspired by three.js and the fact that there is need to have a physics engine for game development, cannon.js (https://www.cannonjs.org/) was developed.
- Bounce demonstrates simply how cannon.js can be used to create a virtual world that has gravity and physics law. Click View Demos on the cannonjs.org website or use the URL https://schteppe.github.io/cannon.js/ to see all examples. In the second row, you will see Bounce. Click on it (or use the direct URL https://schteppe.github.io/cannon.js/demos/bounce.html) to see the three balls free-falling from the air and bouncing when they touch the ground. Now, try to move your cursor over Java 3D Physics and right-click to view the HTML source code. You can see how to create a world with gravity set, create ground and balls, and set up the bouncing ration (i.e., the contact material behaviour and restitution value).
- By now, you are already aware of many JavaScript libraries that can be used for game and virtual world development. Although many of them are easy enough, you still need to put some efforts to create a browser-based game with them. At the end of this unit and this course, we will introduce a free open-source HTML5 game framework, Phaser, that will allow you to develop your own browser-based game for your Assignment 2.
Read “Getting Started with Phaser” (https://phaser.io/tutorials/getting-started) to see what a Phaser game looks like and to develop your first Phaser game.
Note: You don't have to install anything other than the web server since all the example games as well as the game you created can use server-side Phaser lib directly. Just add the following line in your webpage header section:
<script src="//cdn.jsdelivr.net/phaser/2.5.0/phaser.min.js"></script>- Read “Making Your First Phaser Game” (https://phaser.io/tutorials/making-your-first-phaser-game) to develop your first Phaser game.
Before you start developing your browser-based game with Phaser for Assignment 2, please visit Phaser 3 Examples and review the examples and code in the following order.
NOTES:
If the message “Please wait, loading source from GitHub...” appears in the code display area, you can retrieve it in one of the following ways:
- Click the EDIT button above it to bring the code to the Phaser Sandbox.
OR
- Click the Phaser 3 Examples GitHub repository link below it to retrieve the code.
The code for some of the examples can be found in the Console. Press CTRL+SHIFT+I to open it.
Audio → Html5 Audio → Play Audio File
Audio → Html5 Audio → Audiosprite
Cache → Json File
Cache → Text File
Components → Data → Data Values
Components → Data → Get And Set Data Values
Components → Data → Change Data Event
Components → Data → Set Multiple Values
Components → Data → Store Scene Data
Events → Listen To Game Object Event
Game Config → Game Destroy
Game Config → Game Rng
Input → Cursors → Custom Cursor
Input → Cursors → Sc2 Cursors
Input → Keyboard → Add Key
Input → Keyboard → Add Key Using String
Input → Keyboard → Create Key Combo
Input → Keyboard → Reset Key Combo On Match
Input → Keyboard → Key down Duration
Input → Keyboard → Text Entry
Input → Dom Events → On Canvas Out
Input → Dom Events → Pointer Button Status
Input → Mouse → Check Button Released
Input → Mouse → Click Sprite
Input → Mouse → Mouse Down
Input → Mouse → Move Event
Input → Mouse → Over And Out Events
Input → Mouse → Poll Always
Input → Mouse → Pointer Lock
Input → Mouse → Circle Hit Area
Input → Mouse → Triangle Hit Area
Input → Mouse → Polygon Hit Area
Input → Dragging → Enable for Drag
Input → Dragging → Drag Time Threshold
Input → Dragging → Camera Move and Rotate
Input → Game Object → Custom Shape Hit Area
Input → Game Object → Mutliple Down
Input → Game Object → Multiple Over Out
Input → Game Object → On Down Event
Input → Game Object → On Move Event
Input → Game Object → On Up Event
Input → Game Object → Over And Out Events
Input → Game Object → Sprite Example
Actions → Grid Align
Actions → Random Line
Actions → Random Rectangle
Actions → Rotate Around
Actions → Rotate Around Distance
Actions → Rotate Container Facing Point
Actions → Set Alpha
Actions → Shift Position
Actions → Set X Y
Animation → Add Animation Event
Animation → Create Animation On Sprite
Animation → Generate Frame Numbers
Animation → Pause All Animations
Animation → Yoyo
Animation → Animation From Png Sequence
Animation → Animation Get Progress
Animation → Animation Repeat Event
Animation → Chained Animation
Animation → Aseprite Animation
Display → Align
Display → Blend Modes → Difference
Display → Masks → Bitmap Mask Example 2
Game Config → Pixel Art Mode
NOTE: Some of the Phaser 3 examples employ the Phaser 2 coding style. Therefore, you may want to examine some Phaser 2 examples. To do this, click Swap to Phaser 2 Examples (at the bottom of the Phaser 3 Examples page) and review the examples in the following order. Note that not all Phaser 2 code is compatible with Phaser 3.
TEXT → BITMAP FONTS
TEXT → CENTER TEXT ON SPRITE
TEXT → EXTENDING TEXT
TEXT → SET PROPERTIES AFTER CREATION
TEXT → TEXT EVENTS
TEXT → TEXT TABS WITH GOOGLE FONT
SPRITES → ADD A SPRITE
SPRITES → ADD AN IMAGE
SPRITES → ALIGN TEXT TO SPRITE
ANIMATION → SPRITE SHEET
ANIMATION → FRAME UPDATE
ANIMATION → LOOPED ANIMATION
ANIMATION → GROUP CREATION
ANIMATION → MULTIPLE ANIMS
INPUT → MOUSE BUTTONS
INPUT → BUTTON DESTROY
INPUT → BUTTON OPEN POPUP
INPUT → CUSTOM CANDIDATE HANDLER
INPUT → DRAG
INPUT → DRAG UPDATE
INPUT → FOLLOW MOUSE
INPUT → CURSOR KEY MOVEMENT
NOTE: Compare the differences between the three examples in “WORLD.”
WORLD → WORLD WRAP
WORLD → MOVE AROUND THE WORLD
WORLD → FIXED TO CAMERA
ARCADE PHYSICS →DISTANCE TO POINTER
ARCADE PHYSICS → ANGLE TO POINTER
ARCADE PHYSICS → SHOOT THE POINTER
ARCADE PHYSICS → ACCELERATE TO POINTER
ARCADE PHYSICS → BODY ENABLE
ARCADE PHYSICS → BOUNCE
ARCADE PHYSICS → ASTEROIDS MOVEMENT
ARCADE PHYSICS → MULTI ANGLE TO POINTER
WEAPON PLUGIN → SINGLE BULLET
WEAPON PLUGIN → FIRE RATE
VIRTUAL JOYSTICK → BUTTONS
VIRTUAL JOYSTICK → GENERIC JOYSTICK
VIRTUAL JOYSTICK → DUAL STICKS
VIRTUAL JOYSTICK → SHOOT EM UP
- Click the EDIT button above it to bring the code to the Phaser Sandbox.
Complete the following steps to implement the code from Phaser’s “Invaders” game into the Phaser game that you coded in Lesson Notes 8 and 9:
- At the bottom of the Phaser 3 Examples page, click Swap to Phaser 2 Examples.
- Click Games.
- Click Invaders.
- Download the code for “Invaders” to your device.
Unit Exercise
- Using the Invaders game as a foundation, add another level after all the enemies have been shot.
- Allow the player to enter his or her name when the game is over and store the name and score in the database with JavaScript and PHP.
- In the beginning of the game, include a rank list link that allows players to click and see all players’ scores and ranks with JavaScript, Ajax, and PHP.
- Allow players to press P to pause the game and again to resume the game.
- Add a slow-falling weapon buff that the player can control his or her airplane to catch. When the airplane gets the buff, it is immune from enemy fire for 10 seconds.
- Similar to the above exercise, this time the player can use the X key to enable the buff effect manually at any time.
Assignment 2
Use HTML5 and JavaScript to design and develop a browser-based game. Although you can develop any kind of game, we encourage you consider either a role-playing game or an adventure game because of their extensibility, broad application domains, and degree of complexity. If you have no idea what kind of game you want to create for this assignment, you can discuss it with your Academic Expert or with your peers on the course discussion board.
If you decided to create an HTML5 game for your final project (Assignment 3), the game you develop for Assignment 2 will form the basis of your final game project.
Note: the Assignment 2 game still needs to be complete, playable and fun.