Have any questions?

+44 (20) 3540 6226

hello@appshed.com

Game Config

StartGame2
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.

phaser example geom ellipse setsize

 

Using the Phaser Examples

If you want to try out more examples:

  1. Head over to the official Phaser Examples site.
    https://phaser.io/examples
  2. Find a project that you like and view the code.
  3. Copy and paste the Phaser code into the Game Config JavaScript action.
  4. Important 
    1. Don't use the normal Phaser code to launch the app:

      var game = new Phaser.Game(config);

    2. You must replace it with the AppShed launch code:

      eval(app.game.run());

    3. 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
        }
      };

 

 

  • Thursday, 10 March 2022

appshed name white text 250

Copyright © 2022 AppShed Limited

AppShed Support
Customer Support

We are online and available to help teachers/educators using AppShed. How can we help you today?

Chat, call or email support@appshed.com