(GAME MAKER)

A Senior Technology Project

Student Workbook
For AppShed

Copyright © 1993 - 2022 Technokids Inc.

All Rights Reserved
Publisher

TechnoKids Inc.

TechnoArchitect is published by TechnoKids Inc.

TechnoKids is a trademark of TechnoKids Inc. © Copyright 1993 – 2013. All Rights Reserved.

This book may not be duplicated in whole or in part without the expressed written consent of the
publisher, except in the form of brief excerpts or quotations for the purposes of review. The
information contained herein is for the personal use of the reader and may not be incorporated in
any other books, databases, or any kind of software without written consent of the publisher.
Making copies of this book or any portion for any purpose other than your own is a violation of
International copyright laws.

Limits of Liability and Disclaimer of Warranty

The author and publisher of this book have used their best efforts in preparing the book and the
activities contained in it. These efforts include the development, research, and testing of the
theories and programs to determine their effectiveness. The author and publisher make no warranty
of any kind, expressed or implied, with regard to these programs or the documentation contained in
this book.

The author and publisher shall not be liable in the event of incidental or consequential damages in
connection with, or arising out of, the furnishing, performance, or use of the programs, associated
instructions, and/or claims of productivity gains.

Trademarks

Trademarked names appear throughout this book. Rather than list the names and entitles that own
trademarks or insert a trademark symbol with each mention of the trademarked name, the
publisher states that it is using the names for editorial purposes only and to the benefit of the
trademark owner, with no intention of infringing upon that trademark.

2097 Bates Common

Burlington, ON Canada L7R 0A5
905.631.9112
905.631.9113
information@technokids.com
 Table of Content
SESSION 1: ............................................................................................................ 5
GAME MAKER BASICS ............................................................................................ 5
ASSIGNMENT1: APPSHED GAME MAKER DEFINITION ........................................................... 6
1.1 WHAT IS APPSHED GAME MAKER?.... ................................................................. 6
1.2 THE IMPORTANCE OF GAME MAKER… ................................................................. 6
1.3 IS THE GAME MAKER ONLY FOR BEGINNERS?.... .................................................... 6
ASSIGNMENT2: HOW DOES GAME MAKER IDE WORK .......................................................... 7
2.1 GAME TOOLS… ............................................................................................... 7
2.2 TEMPLATES… .................................................................................................. 8
2.3 OBJECT LIST… ................................................................................................ 8
2.4 LEFT SIDE LIST… ............................................................................................. 8
2.5 GAME CONFIG… .............................................................................................. 9
SESSION 2: .......................................................................................................... 11
BREAKOUT GAME ................................................................................................ 11
ASSIGNMENT1: LET'S START A NEW APP .......................................................................... 12
1.1 LOGIN FIRST.…….. ........................................................................................ 12
1.2 NEW APP……................................................................................................ 12
1.3 GETTING TO THE GAME MAKER IDE… ............................................................... 12
ASSIGNMENT2: ADDING OBJECTS TO OUR GAME ............................................................... 13
2.1 START BUTTON… .......................................................................................... 13
2.2 PRELOAD OBJECT…....................................................................................... 13
2.3 STATIC IMAGE… ............................................................................................ 13
2.4 SPRITE OBJECT… .......................................................................................... 15
ASSIGNMENT3: SOLVE SPRITE BALL PROBLEMS ................................................................ 16
3.1 SPRITE DOES NOT MOVE… ............................................................................... 16
3.2 SPRITE FLIES OFF THE SCREEN… ...................................................................... 16
3.3 MAKING SPRITE BOUNCE… .............................................................................. 16
3.4 SPRITE BALL BOUNCING OFF PADDLE… ............................................................. 17
3.5 MAKE THE GAME CHALLENGING…. ................................................................... 17
3.6 FINALLY BREAKING THE BRICKS… .................................................................... 18
ASSIGNMENT4: MAKE OUR GAME MORE PLAYABLE ............................................................. 20
4.1 BACKGROUND IMAGE…. ................................................................................. 20
4.2 CREATING MORE BLOCKS… ............................................................................. 20
4.3 ADDING A SPRITE SHEET…. ............................................................................. 21
4.4 UPDATE FUNCTION… ...................................................................................... 22
4.5 SCORE TEXT…. .............................................................................................. 22
SESSION 3: .......................................................................................................... 24
PHASER 3 ............................................................................................................ 24
ASSIGNMENT1: INTRODUCTION TO PHASER 3 ................................................................... 25
1.1 WHAT IS PHASER 3…. .................................................................................... 25
1.2 HOW IT WORK?.... .......................................................................................... 25
1.3 THE IMPORTANCE OF PHASER 3…. ................................................................... 25
ASSIGNMENT2: WHAT PLATFORMS CAN I TARGET WITH PHASER?........................................ 26
2.1 DESKTOP BROWSERS… .................................................................................. 26
2.2 MOBILE BROWSERS…. .................................................................................... 26
 2.3 FIREFOX OS, TIZEN AND KINDLE…….. ............................................................. 26
2.4 NATIVE APPS AND DESKTOP EXES…….. ......................................................... 26
ASSIGNMENT3: KEY FEATURES....................................................................................... 27
3.1 IT'S JUST PLAIN JAVASCRIPT…….................................................................... 27
3.2 EASY ASSET LOADING…….. ........................................................................... 27
3.3 RENDERING: WEBGL AND CANVAS…….. ......................................................... 28
3.4 AUDIO: WEB AUDIO AND LEGACY AUDIO…….. ................................................. 28
3.5 INPUT: MULTI-TOUCH, KEYBOARD, POINTER, MOUSE…….................................. 29
3.6 PHYSICS, TWEENS AND PARTICLES…….. ......................................................... 29
3.7 PLUGINS…….. ............................................................................................. 30
SESSION 4: .......................................................................................................... 31
MAKING A MOBILE GAME WITHOUT CODING ........................................................ 31
ASSIGNMENT1: APPSHED WITH PHASER .......................................................................... 32
1.1 PHASER IN APPSHED… ................................................................................... 32
1.2 HOW THAT CAN WORK?.... ............................................................................... 32
1.3 PHASER VERSION… ........................................................................................ 32
ASSIGNMENT2: MAKING OUR GAME ................................................................................ 34
2.1 START A NEW APP…. ...................................................................................... 34
2.2 IMPORT THE PHASER GAME…. ......................................................................... 34
2.3 GAME RULES… .............................................................................................. 34
2.4 LET'S PLAY THE GAME…. ................................................................................. 35
ASSIGNMENT3: EDITING AND ADDING SOME FEATURES ...................................................... 36
3.1 CHANGE THE POSITION OF AN OBJECT… ........................................................... 36
3.2 CHANGE THE SIZE OF AN OBJECT… .................................................................. 37
3.3 WHERE IS THE PLATFORM 4?.... ....................................................................... 39
3.4 INCREASE THE STARS NUMBER… ...................................................................... 39
ASSIGNMENT4: MAKE THE GAME MORE CREATIVE .............................................................. 41
4.1CHANGE THE BACKGROUND IMAGE…................................................................. 41
4.2 SHOW THE SCORE PERMANENTLY AT THE TOP… ................................................. 41
ASSIGNMENT5: GETTING IT ON OUR PHONE ...................................................................... 43
5.1 PUBLISH THE GAME… ..................................................................................... 43
5.2 PLAY ON MOBILE DEVICES… ............................................................................ 43
ASSIGNMENT6: IMPORT THE LATEST VERSION ................................................................... 44
6.1 LET'S IMPORT THE PLATFORM GAME 6… ............................................................ 44
6.2 PLAY THE GAME… .......................................................................................... 44

TECHNOKIDS INC.
Session 1:
Game maker basics
In this session, you will get basic knowledge of appshed Game maker
and how important it is. Its importance lies in its ease of handling. So,
we will explain how the Game maker IDE works and what objects can
be used and combined to make it a game.

Assignment1: Appshed Game Maker definition

Assignment2: How does Game Maker IDE work

 TechnoApp SESSION 1

Assignment1: Appshed Game Maker definition

1.1 What is Appshed Game Maker?
AppShed Game Maker is an IDE (Integrated Development Environment) for
building HTML5 games.

IDE is a software for building applications that

combines common developer tools into a single
graphical user interface (GUI).
It is the Game Maker environment that we will
be working in.

1.2 The importance of Game Maker

Game Maker is one of the main products within AppShed. The games you
build become part of your app. Your apps can include a combination of app
items (content) and games.
You can easily Publish and Share your apps allowing others to play your
games. Simply follow the instructions for Publishing, and then share the
URL/web link with friends or post on social media.

1.3 Is the Game maker only for beginners?

Game Maker has been designed for beginners, but also includes
advanced features that allows you to build very sophisticated
games. In fact, you are able to embed ANY JavaScript code,
essentially giving you the ability to create even the most
advanced Phaser game within AppShed.

TECHNOKIDS INC. 6
 TechnoApp SESSION 1

Assignment 2: How does Game Maker IDE work

Game Maker works through several tools and objects that we will go into in
detail in this assignment.

2.1 Game Tools

 The game tool panel will appear when you click on the Plus sign at the
bottom of the page

The Game Tools is the panel on the right that includes all the available tools
(objects) that can be included in your games.

The tools are arranged in the following groups:

 Setup

 Sprites

 Events

 Graphics

 Functions

To add an object to your game simply click on the required tool.

TECHNOKIDS INC. 7
 TechnoApp SESSION 1

2.2 Templates
Game Maker provides many Templates to help build games quickly and with
fewer errors.

The templates are available from a tab/section within the Tools Panel on the
right of the IDE.

 Write Minecraft in the Search box

 click on Use, beside Minecraft Quick Start
 click Yes to import the game.
 Click on Play Game
 The game will be downloaded easily and you can start it.

2.3 Object List

The Object List is the center area of the IDE where all the
objects are displayed.
 You can filter this list according to the required
Group.
 Some objects may be hidden. Use the button in the Filters to display
hidden objects.


2.4 Left side List

In Game Maker you are able to toggle between two modes:

TECHNOKIDS INC. 8
 TechnoApp SESSION 1

 View Objects:
Shows all the game objects. It enables you to add more objects from the
Game Tools (panel).

 Play Game:
Allows you to play the game within the IDE.
This includes Game Controls ; Stop, Start, Pause and
Sleep the game.

2.5 Game Config

The most important object in every game is the

gameConfig object.

This is where the main settings for the game are

placed.

The Action for the gameConfig object holds the

code to launch the game.

eval(app.game.run());

The Action also has 4 functions:

preload()

create()

update()

redmder()

These are the 4 main functions of every Phaser

game. In AppShed Game Maker, these functions
appear in the gameConfig object.

TECHNOKIDS INC. 9
 TechnoApp SESSION 1

As shown in the image, the functions can be empty. Game Maker will add
code to these functions behind the scenes every time you add an object to
your game.

. Conclusion
Now you know how the game maker IDE works, how to control the
objects, and how to use the tools that make the process easier.
And also, what are the consequences and rules that control it which
make it an application that allows you to create your own game

TECHNOKIDS INC. 10
Session 2:
Breakout Game
In this session, you will learn how to start your first game. so, you are
going to build a game very similar to the popular classic game
breakout and fix some bugs and issues that may occur.

Assignment1: Let's start a new App

Assignment2: Adding objects to our game

Assignment3: solve sprite ball problems

Assignment4: make our game more playable

 TechnoApp SESSION 2

Assignment1: Let's start a new App

1.1 Login first

You must have an account to create a new
application.

(The details of creating an account are in the first

part of the application)

Log in and don't forget to enter the school code.

1.2 Getting to the game maker IDE

To launch the Game Maker IDE , you need to click the button named Game
Maker Beta at the top of the screen.

You’ll notice that all of App Builder tools are now replaced with game maker
tools.

1.3 New App

 To build a new game ,you need to create a new App, so we start by
clicking the Gray Plus button at the bottom of the simulated phone,
this will create a new app.
 Go to Settings

 change the name of our app to Breakout game.

 Click Save

TECHNOKIDS INC. 12
 TechnoApp SESSION 2

Assignment2: Adding objects to our game

2.1 Start Button
The first thing you need is a Start Button that can be used to start the game.
To add it, from Game Setup then:

 Click Game Config

Then Save.

This adds a button with all the code needed to

start the game.

2.2 Preload Object

Add a Preload which will generate a loading screen so you don't have to
look at a blank screen while it loads.
From Functions Menu in the tools:

 Click Preload.
 Click Save
 From Play Game Menu, click Play. A
loading screen shows as shown in the image which means the preload
is working.

2.3 Static Image

 Add your first image to the game, which will be a block in your
breakout game.

From Sprites Objects in the tools:

 Click Image

TECHNOKIDS INC. 13
 TechnoApp SESSION 2

Here you'll see all the properties of the object that you are adding as well as
the image used.

Click Save

If you click Play Game again, you’ll notice that there's

now a single block in your game. May not be much but
it's a start!

Moving your block:

This object may have body and other properties like
collisions and overlaps but it cannot have animations.

The block is sitting at the top left of the screen. If you want to move its position,
you can do that by editing its properties on the properties sheet:

 Click View Objects

 If the images don’t show , click on Graphics below View Objects

 Click on Object named Image1

 Click Edit

This is where all the customizable properties are. At the top of the screen, you
can see the image used on this object which is a brick from the breakout
game - that you can change it.

Now towards the bottom of the screen, you have all these different
properties, there are main properties that affect the brick as a whole and
deal with things and body properties which are just dealing with things
related to the object's body.

TECHNOKIDS INC. 14
 TechnoApp SESSION 2

 To change the position of the brick, you need to go to main properties

and find the X and Y values:
 Change the X value from 41 to 160
 Click Save
 Play Game

2.4 Sprite Object

You are going to add the object named Sprite. A sprite is very similar to an
image in the sense that they both have an image assigned to them and have
properties. However, the difference is that sprites can have animations and
movement on them where static images can't.

From the Sprites Objects:

 Click Sprite
 Save button
 Click Play
 There is now a blue ball at the bottom of our
screen. When click, it should shoot off and flies
through the brick and then off screen.

TECHNOKIDS INC. 15
 TechnoApp SESSION 2

Assignment3: solve sprite ball problems

3.1 Sprite does not move
In case that the sprite does not move, you must add an object called pointer
to make the sprite shoots off when we clicking on it.

Find Events Objects in the tools:

 Click Pointer
 Click Save
 Play Game
 Click on the blue ball

Now the sprite object is working and moving.

3.2 Sprite flies off the screen

The sprite doesn't break the brick and it just flies off the screen instead of
bouncing off the sides as in the real breakout game. This has to do with the
Body Properties of the sprite, so let's edit those.

 Click View Objects

 Click Object named Sprite 1
 Select Edit

To change the image properties, scroll down to

Body Properties and you should see an option called CollideWorldBounds
which is unticked. World bounds are the edge of the screen. This was
unticked which means that the ball did not collide with the world bounds,
meaning it just flew through.

 checkbox next to CollideWorldBounds

 Click Save
 Click Play Game
 Click on the Blue ball

3.3 Making sprite bounce

Now you'll notice that the ball gets stuck in the corner, this is because we
haven't added a bounce to make the ball bounce off the world bounds. To
add this, you are going to go back into Sprite 1s
properties.

In body properties, there is an icon called

bounce, which has X and Y values. These
determine the velocity, which means that the
ball will fly off in these directions.

TECHNOKIDS INC. 16
 TechnoApp SESSION 2

The values were initially 0 which means the ball wouldn’t bounce off. By
making these values 1, we are giving instructions that the ball will bounce off
with the same velocity as it had before.

 Click Sprite 1
 Click Edit
 Click Bounce under Body Properties
 Change the X and Y values to 1
 Click Save
 Play Game

You should notice that the ball now bounces off all the walls

3.4 Sprite ball bouncing off paddle

The ball flies right through our paddle which makes it impossible for us to win
this game. Let's fix this by adding an Overlap event.

You want the ball (sprite1) to bounce off the paddle (player). This should
happen every time they overlap each other.

Find Events in the tools:

 Click Overlap
 Click Save
 Click Play Game

The ball now bounces off the paddle. This overlap changes the velocity of the
ball, sending it upwards. It simply reverses the y-velocity.

3.5 Make the game challenging

You have managed to get the ball to bounce off all the world bounds but this
actually brings an issue with it. In the original breakout, the ball doesn't
bounce off all the walls. It's meant to fall through the bottom to make the
game challenging. To fix this, you are going to add a Create Function.

Find Game Functions in the Game Tools:

 Click Create
 Click Save

TECHNOKIDS INC. 17
 TechnoApp SESSION 2

Now let’s take a look at what this does

 Click on the newly added function,

click Edit

This function also has properties sheet with four

variables that have check boxes next to them.

Down, Left, Right and Up.

If the check box is ticked, it means that the

side does have world bounds. If it isn't ticked,
it means it has no bounds. So, make sure
Down does not have a tick in the check box next to it.

 Click Save
 Start Game

You'll now notice that the ball bounces off the Top, right and left world
bounds but falls through the Bottom.

3.6 Finally breaking the bricks

Another issue has come up. The ball flies right through the brick, which means
it's impossible to win the game! Let's fix this by adding a Collider between
these objects

Find Events in the tools:

 Click Collider
 Click Save
 Play Game

TECHNOKIDS INC. 18
 TechnoApp SESSION 2

Just like that all of issues are resolved! The ball now breaks the brick when we
hit it. What we did is add a collision between ball and the image.

This collision is similar to the one we added between the ball and the world
bounds.

You'll see if you edit the collision, we added that it has a collision set between
Object A which is the Sprite (Ball) and Object B which is the Image (brick).

TECHNOKIDS INC. 19
 TechnoApp SESSION 2

Assignment4: make our game more playable

4.1 Background image

Now, we’ve got most of the basics of the game working perfectly but it's
looking a little plain. We can fix this by adding some Background Images .and
we are going to do this by adding a Tile Sprite.

Find Sprites Objects in your Game Tools:

 Click TileSprite
 Click Save
 Play Game

You should now notice that the background of the

game is now filled with a single tiled image. Just like the
other images we can change this to whatever we want
by editing the static image and uploading our own.

4.2 Creating more blocks

We only have one block in our game! This makes it a little too easy to win the
game so to change this we are going to add some more. Now you could
manually go copy, paste and change the position of each block but this
takes way too much time.

To save time we are going to use a Static Group. Using a static group allows
you to create a grid of blocks.

Find Game Setup in the Game Tools:

 Static Group
 Save

Now all the properties that allow you to edit the grid of block are in the
properties of this static group that we created.

 Click View objects

 Click Static Group
 Click Edit

TECHNOKIDS INC. 20
 TechnoApp SESSION 2

Now you'll see the properties for this object are a little different to the other
ones we have used, this is because this object is a group which means all the
properties in it are passed down to the other objects that are in this group.

 Scroll down and you should see the options Cols and Rows. These
control how many rows and columns there will be.
 If we set both to 2 there will be 4 blocks.
Right now, it's set to 5 and 4 which means there
are 20 blocks. This can be used to make each
level more difficult by adding more blocks.
 Place this object below the gameconfig
object
 Click Save

After we added the static group object, you should make the image1 object
hidden

 Click Image1
 Click Edit
 tick the checkbox hidden
 Save

Still there?

 Click Image1
 Click Move
 Drag the image object below the static group
object
 Click Done

4.3 Adding a sprite sheet

Of course, you need a sprite sheet to catch the ball from falling down to win
the game, so let's add sprite sheet object

Find Sprites Objects in your Game Tools:

 Click Sprite sheet

 Click Save
 Place this object below the ball object
 Play Game

TECHNOKIDS INC. 21
 TechnoApp SESSION 2

Oops, the sprite sheet does not move at all!!!

Also, you should add an object to control the sheet object called Joystick

Find Events objects:

 Click joystick
 Click Save
 Play Game

Finally, the sheet start moving when we drag it left and right side.

4.4 Update function

We only have one chance with sprite ball and when the ball falls, it does not
return until the game is restarted, so we are going to use the update function
to get the ball back to where it was last time.

Find function objects:

Click update
Click Save
Play Game

4.5 Score text

Finally, you can play the game and start the challenge, also to increase the
challenge you need to count the bricks you break. So, add a text object to
help you count the broken bricks

Find sprites in the tool:

 Click Text
 Click Save
 Play Game

You will find the default name is score

The score object should located be at the top of the game, is it there?

If it does not appear, you need to move the object above the others

TECHNOKIDS INC. 22
 TechnoApp SESSION 2

 Click View Objects

 Click text
 Click Move
 Drag the text object to the top under preload1
object
 Done

Conclusion
Finally, we learned how to make a fully functioning and customizable
game using AppShed Game Maker! Which is a mix of programming and
drag and drop features helping everyone make awesome games while
still learning about programming.

TECHNOKIDS INC. 23
Session 3:
Phaser 3
In this session, you will have a basic knowledge about the Phaser 3
HTML5 framework, what it is and how to use it.

Assignment1: Introduction to Phaser 3

Assignment2: What platforms can I target with Phaser?
Assignment3: key Features
 TechnoApp SESSION 3

Assignment1: Introduction to Phaser 3

1.1 What is Phaser 3

Phaser 3 is a HTML5 game engine/framework that can be used to make
HTML5 games quick and easy. It is written in JavaScript and makes use of
HTML5 canvas element to create games that can run directly in your browser
without the need to download a plugin
like Flash Player.

What is HTML Canvas?

The HTML <canvas> element is used to draw graphics, on the fly, via
JavaScript, and it is only a container for graphics. You must use JavaScript
to actually draw the graphics.

Also, Canvas has several methods for drawing paths, boxes, circles, text,
and adding images.

1.2 How it works?

A lot of focus was given to performance inside of mobile web browsers, a
growing and important area of web gaming. If the device is capable then it
uses WebGL for rendering, but otherwise, it seamlessly reverts to Canvas.

1.3 The importance of Phaser 3

The framework allows you to dive into creating games without having to
worry about all the technical setup. It comes prepackaged with tools like a
Physics engine, sprite handling, audio features and so much more that it
makes any HTML5 Game developer's life very easy.

TECHNOKIDS INC. 25
 TechnoApp SESSION 3

Assignment2: What platforms can I target with Phaser?

2.1 Desktop browsers
Phaser is a JavaScript library designed to run on all major desktop browsers.
This includes Internet Explorer 9 and above, Firefox, Chrome, and Safari. Prior
to IE9, it didn't support canvas, so if you absolutely need a framework that
can handle DOM rendering then Phaser won't be suitable. However, demand
for these types of games is becoming next to minimal; if anything, it's shifting
in the other direction (towards WebGL).

2.2 Mobile browsers

On mobile, Phaser runs on iOS5 and above inside of Mobile Safari. On
Android, it runs in 2.2 and above in both the stock browser and Chrome.
Chrome is now the standard Android browser, with recent versions even
supporting WebGL, but you still can't ignore the millions of legacy Android
devices that remain in use.

2.3 Firefox OS, Tizen and kindle

The Phaser games run well on Tizen devices and flawlessly under the Kindle
HTML5 wrapper, meaning you can deploy to those devices out of the box. As
more web-powered phones start to enter the market.

2.4 Native Apps and Desktop EXEs

There's such a massive choice of excellent game development packages
that target creating native apps (Unity, Corona, Loom, and so on), that it
wasn't an area we wished to spend much effort covering at first, especially
when compared to the underserved mobile browser market.

TECHNOKIDS INC. 26
 TechnoApp SESSION 3

Assignment3: key Features

We'll highlight a few of what we consider to be the most important features of
Phaser from a developer's point of view:

3.1 It's just plain JavaScript

This may sound like a strange 'feature', but it should actually be quite a
compelling one. There's no massive inheritance chain or component system,
and you don't have to force your objects into any fixed class structure, either.
It's a simple straightforward prototype chain, the way JavaScript was meant
to be used.

So, it is not organized!!

No, this doesn't mean you can't build your game in a structured way; far
from it. All it means is that we don't enforce it. It also means that Phaser is
internally very easy to hack around with.

3.2 Easy asset loading

Phaser has a built-in asset Loader that can handle:

 Images
 Sprite Sheets (fixed-sized frames)
 Texture Atlases (including Texture Packer, JSON Hash, JSON Array,
Flash CS6/CC, and Starling XML formats)
 Audio files
 Data Files (XML, JSON, plain text)
 JavaScript files (so you can part-load your games or JS-based
resources)
 Tilemaps (CSV and Tiled map formats)
 Bitmap Fonts

We routinely export texture atlas files from Flash directly to our Phaser games,
and it supports fully trimmed atlases. Assets can be part-loaded, cached, and
pulled from different URLs (for CDN support), and you can even turn any sprite
into a progress bar with a single line of code.

TECHNOKIDS INC. 27
 TechnoApp SESSION 3

3.3 Rendering: WebGL and Canvas

Internally, Phaser uses Pixi.js for rendering. Pixi
is a great, fast rendering library that focuses
on Canvas and WebGL. It's a library we
continue to contribute towards to help push
things forward.

For your games, this means that if the browser

supports WebGL then the player will more often
than not get a smoother experience. WebGL is
common on desktop but still emerging on mobile; even so, it is where HTML5
games are headed in the future, so supporting it is vital.

3.4 Audio: Web Audio and Legacy Audio

Web Audio allows for proper node-based audio support, with multiple
channels, node routing, and all kinds of effects. So Phaser fully supports Web
Audio.

However, on Android especially, lots of devices still don't support this, so

Phaser also support legacy Audio and the use of Audio Sprites.

What is Audio Sprites?

The method of packing a bunch of samples together into a single

file and using playback markers to jump to different effects.

Phaser will swap between the two depending on the device capabilities
and also includes unlocking the audio sub-system automatically for you,
something that catches out a lot of first-time mobile devs!

TECHNOKIDS INC. 28
 TechnoApp SESSION 3

3.5 Input: Multi-Touch, Keyboard, Pointer, Mouse

Phaser supports keyboard, mouse, touch, MS Pointer (now Pointer under IE11),
and combinations thereof. For example, on Windows Surface devices you
could swap between using a mouse and touch, or indeed use both together.

For touch input, Phaser copes with both single-touch and

multi-touch environments. You can define up to 10
touchpoints and track them all independently, using their
events to handle Sprite interactions such as dragging,
tapping, and collision.

3.6 Physics, Tweens and Particles

Bundled into the core library are the ArcadePhysics and ArcadeParticles
systems.

What does that's mean?

These are simple AABB light-weight libraries that allow you to

apply gravity and motion to any Sprite, then test for collision
and separation.

Using a world-based quad tree to help minimize collision tests, you can
achieve decent results quickly with little processing time required.

However, we understand that this won't suit all types of games, so the physics
system is easy to replace and none of the physics properties are bound to
actual sprites (but rather to a body component), so can be swapped out for
the likes of Box2D or p2.js.

TECHNOKIDS INC. 29
 TechnoApp SESSION 3

A tweening system is also built-in, allowing you to tween objects or properties

easily. And should the game
pause, then all of your tweens will
pause automatically and resume
as needed.

3.7 Plugins
Phaser provides features for all kinds of games but without causing the core
library to explode in growth. So, they have built a plugin system.

Phaser plugins can register themselves with the core framework, be updated
in line with the core game loop, and perform all kinds of useful additional
tasks.

Conclusion
In this session, we learned what Phaser 3 is, its benefits and how it works,
as well as what platforms it supports, as its importance appears from the
amount of features it provides.

TECHNOKIDS INC. 30
Session 4:
Making a mobile
game without coding
Here you will learn how to import a small game involving a player running and
jumping around platforms, collecting stars and avoiding baddies. While going
through this process, you'll explain some of the core features of the
framework.

Assignment1: Appshed with Phaser

Assignment2: Making our Game

Assignment3: Editing and adding some features

Assignment4: make the game more creative

Assignment5: import the latest version

 TechnoApp SESSION 4

Assignment1: Appshed with Phaser

1.1 Phaser in appshed
Now before we get too deep into the game making, let's take a second to
look at the underlying game engine that will help you make
games easily, which we talked about in the last session. It's
called Phaser and because it runs on HTML 5 and
JavaScript, this allows you to make and run games in your
web browser.

1.2 How that can work?

AppShed takes the Phaser engine and overlays a drag and
drop, easy edit feature allowing you to make games without
doing any coding.

1.3 Phaser version

AppShed Game Maker is based on Phaser 3.
The Phaser library is updated regularly, closely following the
stable release version of the source code library.

The exact version number of the Phaser library can be

determined in two ways:

 Click App Builder at the top

 Click on the "setting" within
the simulator.
 Click Setting
 Click About tab

1. View the Console in the browser. The Phaser version is written to the
console when the source code loads.
 Click Right click, Inspect

TECHNOKIDS INC. 32
 TechnoApp SESSION 4

One of the reasons that Phaser was chosen as the

game engine for AppShed is due to the extensive and
excellent learning materials they provide.

TECHNOKIDS INC. 33
 TechnoApp SESSION 4

Assignment2: Making our Game

1.1 Start a new App
 Log in to AppShed
 Go to Game Maker
 Create a new game: Click on “New App/Game” button
 Go to Settings. Name it "Game 1"
 Click Save

1.2 Import the Phaser game

At this point, you have made your app and gave it a name but your app is
completely empty. To add your game, you need to click on:

 Templates
 search for "game" in the search bar

You'll then see a bunch of different options (these are all different games at
different difficulty levels) we are going to click on:

 Platform Game as this is the easiest game to edit.

 Platform Game 1
 Use
 yes

Once you click, use you should see your app suddenly be filled
with a bunch of images and names, these are all aspects of
our game. You'll see there's a Pipe, character, platforms, and
backgrounds which will later make up the world of the game.
At the very top, you should see a big start game button, go
ahead and double-click it to start the game.

1.3 Game rules

 If you touch the dark ground, you cannot jump
anymore.
 You should collect moving stars to raise your score.
 You will end the game when you cross the purple flag.

TECHNOKIDS INC. 34
 TechnoApp SESSION 4

1.4 Let's play the game

When the game is loaded you can use the arrow keys or click and drag with
the mouse to move around. In the game, you should see the pipe, platforms
and all the other aspects we saw in the previous screen

1 2

3 4

TECHNOKIDS INC. 35
 TechnoApp SESSION 4

Assignment3: Editing and adding some features

In the last step, you learned that all the images in the screen made up the
world in the game. so, if you edit these, it would change things in our game.
to edit these, left click on the object, then edit.

3.1 Change the position of an object

Let’s say, for example you want to change the position of one of the

platforms, you would do this by:

 Click Platform 1
 Click Edit.

 There is a text box with a

bunch of values like X, Y, width
and height.

 Change the values

 X value to 120
 Y value to 230
 Click Save
 Try the game again

TECHNOKIDS INC. 36
 TechnoApp SESSION 4

From To

3.2 Change the size of an object

If you take a look at the player and the ground, you may notice that the
player didn't hit the ground, let's find out why.

Because the ground image has a width value along the width of our
game .

You have to change the size of the ground to fix the problem and make the
game more difficult. because if the player touches the ground, he loses the
game and he can't jump again.

To change the ground width:

 Click Ground image

 Edit
 Change the width value
from 1350 to 75.
 Save
 Play the game

But this may not work and there are no changes!!!

TECHNOKIDS INC. 37
 TechnoApp SESSION 4

Yes this may happen because there is another width property that must be
changed in the body properties section.

 Click Ground image

 Edit
 From Body properties, Change the
width value from 1950 to 75.
 Save
 Play the game

From To

if you want to change the size, you should change the width and height
value

If you want to change the position of the platform, you should change
the X and Y value

TECHNOKIDS INC. 38
 TechnoApp SESSION 4

3.3 Where is the platform 4?

When you play the game, you will see three platforms that
allow the player jump on them, but if you notice that our
game has four platform objects but only three can be seen.

Why!!

Because each of platform 3 and platform 4 have the same x and y

values, so they have the same position which means they are
overlapping.

To fix this, change one of the values and then all 4 can be seen.

 Click platform 3
 Edit
 Change X value from 500 to 400
 Change Y value from 400 to 320
 Save
 Play the game

From To

3.4 Increase the stars number

Actually, you have 10 stars according to the
group stars object, but only 2 are shown.
Because the group object is hidden and there are
other objects layer on it. To solve this issue, you
have to move it above the star object to be able
to see it and pick up more stars.

TECHNOKIDS INC. 39
 TechnoApp SESSION 4

 Click Stars group

 move
 Drag the starts group object on the top of
the star image.
 Done

From To

TECHNOKIDS INC. 40
 TechnoApp SESSION 4

Assignment4: make the game more creative

4.1 Change the background image
The default background image is simple, let's change it to make the game
brighter.

You can replace it with a slightly larger image than the default image. You
can choose an image with dimensions of 1920 * 1200 to fill the screen and
remove the black section.

 Click Ground object

 Edit
 Choose Browse
 Upload or choose image
 select
 Save
 Play the game

From To

4.2 Show the score permanently at the top

The score text appears only at the end of the game.

To make it visible throughout the game

 Click Score text

 move
 Drag the score object under the
gameConfig.

TECHNOKIDS INC. 41
 TechnoApp SESSION 4

 Done

Let's change the style of the text:

 Click Score text

 Edit
 At the basic settings click style tab

Change the color from text settings section

 Choose a color from the color list

Edit the font of text:

 Bold style
 Italic style

Make the font size bigger:

 Set 20 on the size box

 Save

From To

TECHNOKIDS INC. 42
 TechnoApp SESSION 4

Assignment5: getting it on our phone

5.1 Publish the game
Your game is ready to play, to get it onto your
phones

 Click Publish
 Start

5.2 Play on mobile devices

Once this process is completed, click on

 share
 QR Code

A QR Code is created. You can scan with your phone. In

a matter of seconds, the game is loaded and you can
now play on our phone. To control the character, you can
either drag your finger across the screen or you can tilt
your phone in the direction you want to move.

 Web App (in the Share menu) opens the game in another tab.
 You can copy this link and email it or type it into your phone.

TECHNOKIDS INC. 43
 TechnoApp SESSION 4

Assignment6: import the latest version

6.1 Let's import the platform game 6
Firstly, you should build a new app (follow the steps of creating a new app)
and name it Game 6. To import the platform game 6, search on the template
tab for game then:

 Platform Game 6
 Use
 yes

6.2 Play the game

Now, the app is filled with objects that we know most of them, but also
include new objects like:

 Audio to add a sound when the player jumps

 Also, there is an audio when the player reaches
the flag and ends the game
 More of image platforms
 More tile sprites in the background

Conclusion
At this point, you have learned how the game engine works,
how to get to these games and how to make the games more
custom by resizing and moving things. And just like that we've
built a very simple game and put it on our phone.

TECHNOKIDS INC. 44
 Appendix A:
Contact Information
We want to be your partner in computer education.

If you have any comments or questions regarding our instruction projects,contact

Head Office.

TechnoKids Inc.
2097 Bates Common
Burlington, ON Canada L7R 0A5

information@technokids.com
support@technokids.com
www.technokids.com

Toll Free 1.800.221.7921

Phone: 905.631.9112
Fax:905.631.9113