Game Config

Game Config is the main object in every AppShed game. Every game must start with a Game Config object.
You edit some of the properties for the Game Config. This will change the overall layout and behaviour of your game e.g.
- width and height of the game
- gravity
- debugging
All of these settings are optional. For most AppShed games you don't need to change anything.
Teachers
When starting out, simply add a Game Config object at the top of every game, and click "Save".
You don't need to add or change anything else. The default settings will work fine in most cases.
Later, if you want to explore more advanced topics, you can read the other sections on this page.
Sample code:
eval(app.game.run());
// Default Phaser methods.
function preload ()
{
}function create ()
{
}function update ()
{
}function render()
{
}
Advanced Users
Fo advanced users, you can modify your Game Config "Action" using JavaScript.
eval(app.game.run());
The first line in the code is
eval(app.game.run());
This is mandatory and must always remain near the top of the code.
preload, create, update, render
The main methods of any Phaser game are:
preload(){ ... }
create(){ ... }
update(){ ... }
render(){ ... }
These functions are the main functions for any Phaser game. In AppShed they are optional, because Game Maker handles a lot of this work. But you can add one or all of these functions if you want to create your game using the traditional Phaser approach.
AppShed Game Maker basically adds code to these 4 functions automatically, when you add objects to your game. But you can just as easily write the code yourself, in the Game Config object. The only difference is that you have to create everything using JavaScript, not using Game Objects.
Any valid Phaser3 JavaScript can be added to the JavaScript editor. This includes variables and methods, and even classes. (See www.phaser.io for full documentation of Phaser3)
Advanced Example
Ready to try out an advanced example?
- Replace the JavaScript code with the following code:
eval(app.game.run());
function create (){
var ellipse = new Phaser.Geom.Ellipse(160, 200);
var graphics = this.add.graphics({ lineStyle: { width: 2, color: 0x00aaaa } });for(var i = 0; i < 20; i++){
ellipse.setSize(i * 13, i * 17);
// stroke with increasing smoothness
graphics.strokeEllipseShape(ellipse, 32 + i);
}
}
- Save and Play Game.
You should see something like the image below.
You can see that with a few lines of JavaScript code in the Game Config, you can already create something quite interesting.
Using the Phaser Examples
If you want to try out more examples:
- Head over to the official Phaser Examples site.
https://phaser.io/examples - Find a project that you like and view the code.
- Copy and paste the Phaser code into the Game Config JavaScript action.
- Important
- Don't use the normal Phaser code to launch the app:
var game = new Phaser.Game(config); - You must replace it with the AppShed launch code:
eval(app.game.run()); - You don't need to config object that noramally appears at the top of each example. You can just delete that.
var config = {
width: 800,
height: 600,
type: Phaser.AUTO,
parent: 'phaser-example',
scene: {
create: create
}
};
- Don't use the normal Phaser code to launch the app: