Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
22. December 2015

 

Welcome to the next section in the ongoing Closer Look at series, a series of guides aimed at helping you decide which game engine is right for you.  Each closer look at entry is a cross between a review and a getting started tutorial that should help you decide if a game engine is right for you.  Today we are looking at the Atomic Game Engine with the extensive editor support forked from the Urho3D game engine that I covered earlier.  The engine itself is written in C++ while the primary programming language is JavaScript, however .NET and TypeScript bindings are available as is a community created Haxe binding.

 

Wait you say?  A commercial game engine forked from an open source project??? Don’t worry, put down your pitchforks, this is an example of commercialization done mostly right.  First off, it’s a noticeable improvement over the original in many ways.  Second, much of the derived source code is still available freely and open source.  Finally the Atomic team are making pro licenses available to contributors of dependencies such as Urho3D, Box2D, TypeScript, Tiled, etc.  This is a nice approach and one I would like to see more closed software layered over open source software adopt.  There is also a free version available with limitations that we will discuss shortly.

As always, there is an HD video version available here.

 

Pricing Structure

 

** Important EDIT ***********

The following details are no longer accurate.  Since this was published, the Atomic Game Engine transitioned to an MIT open source license and is now free to use.

**************************

 

As mentioned earlier, there exists a free option and a number of other tiers.  As of writing Atomic Game Engine is currently in Early Access which includes a lower price (and increased instability…).  The pro licenses include a lifetime of upgrades.  Here is the full pricing structure:

image

 

As you can see the free version you have to choose between 3D, Android or iOS support and must have less than $100,000 annual revenue and includes a splash screen.  The indie license revenue is capped at $500,000 and there is no splash screen requirement.  In my opinion at least, this price tier is fair.  One major caveat however, to build completely from source you will need a Pro license otherwise you have to wait for new binary releases.

 

The Editor

The editing environment is probably the biggest feature of Atomic, so lets start there.  This is the welcome screen when you first load Atomic Editor:

image

 

As you can see there are several sample projects to start from.  Create a new project using File->New Project menu, which will show the following dialog:

image

 

You can work in 2D or 3D mode within Atomic.  For this example I will choose 2D.  Next define your project settings:

image

 

You will notice that TypeScript and JavaScript are the default languages available.  You can work in .NET, Haxe or even using C++ but at this point in time you will be mostly on your own.  The tooling and documentation is mostly oriented for JavaScript development for now.  As it is layered over Urho3D, if you are comfortable in using Urho3D with C++ you should be able to adapt to C++ in Atomic fairly simply, plus the majority of documentation is still applicable with minor changes.  C++, .NET and Haxe targets are beyond the scope of this review however.

 

Now that we have a project loaded, the left hand side of the editor changes slightly.  The top portion represents that assets of the current project, the mid portion contains the contents of the currently selected folder, while the bottom portion represents the scene graph of the currently selected scene.

image

 

With Scene.scene selected you can see that a default scene contains a Camera and a Node entity.  Like most modern game engines Atomic uses the composition approach, although instead of Entities and Components, you have Nodes and Components, but the end result is very similar.  Now that we have a scene selected, it should be visible in the middle portion of the UI:

image

 

This is where you select and arrange the entities within your scene.  You can instance new entities… er, nodes by dragging them in from the left side of the screen.  With a node selected, the right hand side shows the property inspector giving us access to the properties of the node as well as the components it contains:

image

 

Adding new items to the scene is trivial, simply click the Create button in the hierarchy area.  The options are limited to Node or for some reason in 3D there is an option for Light.  You can also create a prefab instance that we will discuss later.

However for adding components there are a ton more options available.  Adding a component is simple a matter of clicking Add Component in the inspector with the appropriate Node selected.

image

 

Each component type has it’s own corresponding editor.  The following for example is the Rigid Body components editor:

image

 

Game assets can be imported via drag and drop.  This process automatically triggers the appropriate importer:

GIF

 

The Programming Experience in Atomic Game Engine

The primary or lead programming language when working with Atomic Game Engine is JavaScript, while .NET, Haxe and Typescript language bindings exist (but aren’t documented).  The source code is primarily written in C++, while the editor is created using the Typescript language.  You could of course code your entire game using C++ if you preferred, but again, the process is currently undocumented.  The programming model is pretty intuitive and quick to come to terms with.  For the following code examples, I will be looking at the Platformer2D example.

 

Taking a quick look at the generated source code, you can find your project’s entry point in the Scripts folder:

image

 

Here are the contents of main.js:

// This script is the main entry point of the game

// create the start ui programmatically, we could also
// use a ui template
//create  main view
var view = new Atomic.UIView();
//create a window
var window = new Atomic.UIWindow();
//disable tile bard and make it non resizeable
window.settings = Atomic.UI_WINDOW_SETTINGS_TITLEBAR;
window.text = "Physics Platformer";

// Create a layout, otherwise child widgets won't know how to size themselves
// and would manually need to be sized
var layout = new Atomic.UILayout();
layout.rect = view.rect;
// give ourselves a little more spacing
layout.spacing = 18;
//axis to y
layout.axis = Atomic.UI_AXIS_Y;
//add ours layout to window
window.addChild(layout);

//create a text field
var text = new Atomic.UITextField();
text.text = "Please select the time of day:";
layout.addChild(text);

// Buttons layout
var buttonLayout = new Atomic.UILayout();
buttonLayout.axis = Atomic.UI_AXIS_X;
layout.addChild(buttonLayout);
var buttonDaytime = new Atomic.UIButton();
buttonDaytime.text = "Play Daytime";
buttonDaytime.onClick = function () {
  run(true);
  //we need to return value here, otherwise we will be GC'ed
  return true;
}
buttonLayout.addChild(buttonDaytime);

var buttonNightTime = new Atomic.UIButton();
buttonNightTime.text = "Play Nighttime";
buttonNightTime.onClick = function () {
  run(false);
  //we need to return value here, otherwise we will be GC'ed
  return true;
}
buttonLayout.addChild(buttonNightTime);

window.resizeToFitContent();

// add to the root view and center
view.addChild(window);
window.center();
var dayTime;
function run(daytime) {
  //ok, then remove ours window
  view.removeChild(window);
  //require GlobalVariables module, and set its dayTime value to the current daytime
  require("GlobalVariables").dayTime = daytime;
  //load main scene!
  var scene = Atomic.player.loadScene("Scenes/Scene.scene");
  //if we are running ours game on android
  if(Atomic.platform == "Android" || Atomic.platform == "iOS") {
    //requiring a dpad module
    var DPad = require("DPad");
    //create a new view
    var uiView = new Atomic.UIView();
    //creating a new DPad
    var dpad = new DPad();
    //adding horizontal and vertical buttons
    dpad.addAll();
    //ok, then we could init ours dpad
    dpad.init(uiView);
    //create a jump button
    var jumpButton = new Atomic.UIButton();
    //unset its skin, because we will use UIImageWidget
    jumpButton.skinBg = "";
    //create ours jump button image
    var jumpButtonImage = new Atomic.UIImageWidget();
    //load image
    jumpButtonImage.setImage("UI/jumpButton.png");
    //resize ours image by 2.2x
    var jumpButtonWidth = jumpButtonImage.imageWidth*2.2;
    var jumpButtonHeight = jumpButtonImage.imageHeight*2.2;
    //calculate position
    var posX = Atomic.graphics.width - Atomic.graphics.width/8-jumpButtonWidth/2;
    var posY = Atomic.graphics.height - Atomic.graphics.height/4-jumpButtonHeight/2;

    //sets jumpButton rect, specify position and end position
    jumpButton.rect = [posX, posY, posX+jumpButtonWidth, posY+jumpButtonHeight];
    //sets jumpButtonImage rect, we specify there only end position
    jumpButtonImage.rect = [0, 0, jumpButtonWidth, jumpButtonHeight];
    //adds image to jumpButton
    jumpButton.addChild(jumpButtonImage);
    //adds jumpButton to the dpad view
    dpad.view.addChild(jumpButton);
    //sets jumpButton capturing to false, because we wanna make it multitouchable
    jumpButton.setCapturing(false);
    //binds jumpButton to KEY_SPACE
    Atomic.input.bindButton(jumpButton, Atomic.KEY_SPACE);
  }
}

This is actually a fairly advanced main.js, some are as simple as:

// This script is the main entry point of the game
//Load scene
Atomic.player.loadScene("Scenes/Scene.scene");

In this particular example the first half of the code demonstrates programmatic generation of a UI.  The later half creates an on screen controller if running on a mobile platform.  As you can see from the second, much shorter main, it can be as simple as calling loadScene() passing in the scene you create using Atomic Editor.

 

The majority of code in your project will be organized in components:

image

 

Components are attached to Nodes just like any other component.  Here for example is a script component attached to the Level node in the platformer example:

image

 

And the contents of that script:

"atomic component";
//requiring LevelParser module
var LevelParser = require("LevelParser");

//A Level
var component = function (self) {
  //start function will be excecuted, after connecting our component to the node, after the constructor
  self.start = function() {
    //get TileMap2D component from our current node
    var tileMap = self.node.getComponent("TileMap2D");
    var tmxFile = tileMap.tmxFile;
    
    //looping main game song
    var music = Atomic.cache.getResource("Sound", "Sounds/JumpingBat.ogg");
    music.looped = true;

    //create LevelParser object
    var levelParser = new LevelParser(tileMap);
    levelParser.createPhysics(tileMap, tmxFile);

    var position = levelParser.getSpawnpoint();
    position[1] += 1.5;

    //create a child prefab
    var node = self.scene.createChildPrefab("Player", "Prefabs/Hero.prefab");
    //set it position to the current node position
    node.position2D = position;

    //get all entities from our map which names MovingPlatform
    var platforms = levelParser.getEntities("MovingPlatform");
    for (var i = 0; i < platforms.length; i++) {

        var p = platforms[i];
        var node = self.scene.createChildPrefab("MovingPlatform", "Prefabs/MovingPlatform.prefab");

        node.position2D = p.start;
        node.startPos = p.start;
        node.stopPos = p.stop;
    }

    //get all entities from our map which names Coin
    var coins = levelParser.getEntities("Coin");
    for (var i = 0; i < coins.length; i++) {
        var node = self.scene.createChildPrefab("Coin", "Prefabs/Coin.prefab");
        node.position2D = coins[i].position;
    }

    //get all entities from our map which names BatWaypoint
    var waypoints = [];
    var batWaypoints = levelParser.getEntities("BatWaypoint");
    for (var i = 0; i < batWaypoints.length; i++) {
        waypoints.push(batWaypoints[i].position);
    }

    //get all entities from our map which names Bat
    var bats = levelParser.getEntities("Bat");
    for (var i = 0; i < bats.length; i++) {
        var node = self.scene.createChildPrefab("Bat", "Prefabs/Bat.prefab");
        node.position2D = bats[i].position;
        node.scale2D = [.5, .5];
        node.waypoints = waypoints;
    }

    //get all entities from our map which names Vine
    var vines = levelParser.getEntities("Vine");
    for (var i = 0; i < vines.length; i++) {
        var vnode  = self.scene.createChild("Vine");
        vnode.createJSComponent("Components/Vine.js", {startPosition : vines[i].position});
    }
    
    //reduce num rays on mobile/web platforms for better performance
    if(Atomic.platform == "Android" || Atomic.platform == "iOS" || Atomic.platform == "WebGL") {
      self.scene.getChild("TheSun").getComponent("DirectionalLight2D").numRays = 512;
    }

  }

}

exports.component = component;

You may notice the exports statement at the bottom of the example and the require statement at the top.  Atomic uses CommonJS for module support.  This particular example implements the start() method, which will be called automatically on the component during creation.  There is a method update() that will be called each pass through the primary game loop and is where the majority of your game logic will most likely be performed.  You can also create and subscribed to arbitrary events, enabling easy component to component component communication.

 

This example also illustrates another powerful feature of AGE, prefabs.  In the line:

var node = self.scene.createChildPrefab("Player", "Prefabs/Hero.prefab");

This is programmatically creating a prefab named Player from the file Prefabs/Hero.prefab.  Prefabs are simply pre-configured Nodes that can be re-used and instanced easily.  To create a prefab you simply create a node, add it’s various components, then drag that node up into your project resources, generally into a folder called prefab. 

 

One other thing you may notice is that double clicking a script brings up an integrated code editor:

image

 

This is an incredibly handy feature that is sadly somewhat broken right now.  Normally the editor has a great deal more functionality including full code completion but a bug resulted in it’s removal.  As of writing they are in the process of integrating Chromium and improving the integrated editor.  That said, the majority of users make use of an external editor.  One popular choice is the Atom editor, which has a Atomic Game Engine package available:

image

 

This enables you to run Atomic projects directly from the Atom editor, or to open the current project in the Editor.  That said, it didn’t actually work for me, saying atomic-cli NPM package needed to be installed, which it was.  Not sure what the error here was.  On cool thing about using Atom as your editor, is if you also use the Typescript language, you get complete and accurate intellisense in the editor:

image

 

There is a Typescript seed project (among other things) available in this Github repository.  You may have noticed a few moments back that I mentioned a CLI, or command line interface.  Assuming you have Node installed, you can install it using the command

npm install atomic-cli –g

This interface enables you to create, edit and run projects directly from the command line, which also makes it easy to integrate AGE into existing text editors such as Sublime Text or Notepad++.

 

The actual coding process is a bit beyond the space/time we have available here.  Given that Atomic is built on top of Urho3D you can expect a full featured and expansive API including pretty much all the functionality you expect from a modern 2D or 3D game engine.  If you want more of a taste for what coding in AGE is like be sure to check out the examples repository which contains a pretty comprehensive set of examples to learn from.  Of course the existing Urho3D documentation is also a good source of information, although some things will obviously be different as this is a fork.

 

Platform Support

Once you finish developing your game it’s time to deploy and AGE makes this process easier than most.  Depending on version, the following platforms are available:

  • Windows
  • Mac
  • WebGL
  • iOS
  • Android

And building for a platform is as simple as choosing Build->Build Settings and filling in the appropriate values:

GIF

 

Documentation and Community

 

As is often the case with in development engines, documentation is not the strong point of Atomic Game Engine.  There is a complete reference guide available somewhat confusingly under the videos section of the AGE website.  There is also a robust collection of examples available, which truth told is going to be your primary source of information for the foreseeable future.  As this engine is based on a fork of the Urho3D engine, a good chunk of Urho’s existing documentation is still applicable, although it will be a challenge for new developers to figure out when this is and isn’t true.

 

There is a community forum with a  growing community.  It’s not exceedingly active, but almost every single question goes answered, which is a good sign.  Additionally there is a Gitter chat which can be thought of as a version of IRC that  lasts forever and no doubt pulls a bit of traffic away from the forum.  It does seem to be quite active and a fast source for answers.  Bugs and features are tracked using github and are very active making development quite transparent.  Finally there is a Wiki, but it is extremely sparse at the moment.

 

Summary

 

Atomic Game Engine is very much an engine under development and at times it shows.  On the other hand, it is based on a very mature engine, so there is no reason you wouldn’t be able to use it in a production ready environment.  I am not going to answer the question “Is it worth it to use Atomic instead of Urho3D?”, as value is an incredibly subjective concept.  What I will say is the Atomic Game Engine adds a layer of tooling and polish on top of a game engine that required a layer of tooling and polish and did it well.  The developer experience using Atomic is a great deal nicer than the developer experience using Urho3D.

On that point, would I recommend Atomic Game Engine to new users?  No, not yet, but mostly due to the in development nature and the current lack of documentation.  In the future though, I imagine all of that will change and this will be an easy to recommend engine.  Now, what about to more experience developers?  Well if you are willing to work on an engine that is under development, there is certainly a lot here to like.  If you are looking for a Unity-esque editing experience, but with a much cleaner coding experience and access to the source code, certainly give Atomic a shot… especially with early access pricing in effect.

 

The Video

Programming


21. November 2015

 

Until now your language choices when using Unreal Engine have either been the high level graphical Blueprints or low level C++.  Today however NCSoft, makers of Lineage, Guildwars and more just release an extension that adds Javascript support to UE4.  Announced on the UE4 forums (login may be required) the extension was released on Github with full source under the Apache2 open source license.  From the readme:

Features
  • Powered by latest V8 (ES6)
  • CommonJS modules
  • Full access to the whole UnrealEngine API
  • Free to subclass existing classes including blueprint
  • Web-dev like UMG (Jade, pseudo-css, pseudo-angular.js)
  • Live reload
  • Communicate with outer world: REST, process(pipe), arraybuffer, ...
  • Bridge API for editor extension
  • Auto-completion for Visual Studio (auto-generated *.d.ts)
  • Dedicated Javascript console on UnrealEditor

The add-on is tightly integrated with Unreal including the ability to subclass existing classes:

class MyActor extends Actor {
  properties() {
    this.MyProp/*EditAnywhere+Replicated+int*/;
  }
  RPC(x/*int*/) /*Server+Reliable*/ {
    console.log('This function is replicated',this.MyProp++);
  }
}
let MyActor_C = require('uclass')()(global,MyActor);
if (GWorld.IsServer()) { 
  new MyActor_C(GWorld);
}


Very cool.  Head on over to the Github page for installation instructions.

GameDev News


19. November 2015

 

I remember using Allegro wayyyyyy back in the day in the early 1990s.  It was one of few graphics libraries available for DOS based machines (even though it started life as an Atari library) and certainly one of the only free game libraries available.  Amazingly enough Allegro is still under active development.  Anyways enough reminiscing…  today Allegro.js was released, an HTML5 library inspired by Allegro.  For a brand new library there is already an impressive amount of documentation and reference material available.  One of the hallmarks of the Allegro library was it was brutally simple to use and Allegro.js seems to have carried on that tradition.  Here is an example Allegro app:

 

// bitmap oobjects
var logo,ball;

// sample object
var bounce;

// size and speed of the ball
var size=64,speed=5;

// positon of the ball
var cx=100,cy=100;

// velocity of the ball
var vx=speed,vy=speed;

// drawing function
function draw()
{
   // draw allegro logo background
   stretch_blit(logo,canvas,0,0,logo.w,logo.h,0,0,SCREEN_W,SCREEN_H);
   
   // draws the ball resized to size*size, centered
   // stretch it a bit vertically according to velocity
   stretch_sprite(canvas,ball,cx-size/2,cy-size/2,size,size+abs(vy));
}

// update game logic
function update()
{
   // did the ball bounce off the wall this turn?
   var bounced=false;

   
   // if the ball is going to collide with screen bounds
   // after applying velocity, if so, reverse velocity
   // and remember that it bonced
   if (cx+vx>SCREEN_W-size/2) {vx=-speed;bounced=true;}
   if (cy+vy>SCREEN_H-size/2) {vy=-speed*3;bounced=true;}
   if (cx+vx<size/2) {vx=speed;bounced=true;}
   if (cy+vy<size/2) {vy=speed;bounced=true;}
      
   // move the ball
   cx+=vx;
   cy+=vy;
   
   // if it bounced, play a sound
   if (bounced) play_sample(bounce);
   
   // add gravity
   vy+=.3;
}

// entry point of our example
function main()
{
   // enable debugging to console element
   enable_debug("debug");
   
   // init all subsystems, put allegro in canvas with id="canvas_id"
   // make the dimesnions 640x480
   allegro_init_all("canvas_id", 640, 480);
   
   // load ball image
   ball = load_bmp("data/planet.png");
   
   // load background image
   logo = load_bmp("data/allegro.png");
   
   // load the bounce sound
   bounce = load_sample("data/bounce.mp3");

   // make sure everything has loaded
   ready(function(){
      
      // repeat this game loop
      loop(function(){
         
         // clear screen
         clear_to_color(canvas, makecol(255, 255, 255));

         // update game logic
         update();

         // render everything
         draw();
   
      // all this happens 60 times per second
      }, BPS_TO_TIMER(60));
   });
   
   // the end
   return 0;
}
// make sure that main() gets called as soon as the wesbite has loaded
END_OF_MAIN();

 

If this looks interesting to you be sure to check out Allegro.js.  It looks like a cool library, based on another cool library, just waiting for a community to form around it.

GameDev News Programming


12. March 2015

 

I’ve long been a fan of the Phaser HTML5 game library, as my ongoing tutorial series might indicate.  Somewhat recently Phaser started adding premium commercial plugins.  The most recently added plugin adds support for Box2D, the popular 2D physics based library.  This is a commercial plugin (aka, you’ve got to pay for it.  $65 for premium $45 for standard – only difference is number of samples ), but don’t fret, Phaser still has a number of physics systems built-in that are completely free.

 

Box2D is a feature-rich 2D physics system used by thousands of hit games.

This plugin opens-up the power of Box2D directly within Phaser. It has the same user-friendly approach to its API that the rest of Phaser does, making integration and game development a beeze.

image

It uses the excellent box2d-html5 JavaScript port by Isaac Burns. We found that this library had the best performance of those tested, even on mobile.

Development of the plugin was lead by Box2D experts iForce2D - the company responsible for the excellent Box2D visual editor R.U.B.E

 

See the Box2D Plugin Page for More Details

 

The Download includes

  • Getting Started Guide - You'll be coding in next to no time.
  • 90 Code Examples - From games to core mechanics.
  • API Documentation and Box2D User Manual
  • Free Upgrades
  • License free - Use it in commercial games
  • Ready built and minified source files + grunt scripts
  • Delivered via download from FastSpring.com

Try it out

We've added 40 of the Box2D examples to this site.

Run them, play with them and edit the code to get a feel for how it all works.

 

The full release details are available here.

 

I actually like to see this form of monetization.  Developers need to eat and we want  them working to make better and better products.  Keeping the core free while adding premium but optional features as a premium plug-in seems like a good middle line to me.  The key is to keep developing the core free product at the same rate that commercial plugins are added.

News


15. January 2015

 

I’ve been doing a long running Phaser with TypeScript tutorial series that illustrates basically everything you need to know to create a complete game using the Phaser HTML5 game engine.  I decided to put together a video tutorial showing how to put it all together to make a complete game.

 

Now, keep in mind, the game is incredibly simple… I wanted to keep the entire thing to under an hour after all ( I failed, it’s an hour and a half ), so I had to keep the scope reasonable in size.  So as a result I’ve created Extreme Walking Simulator!  Yeah, you walk… and that’s it actually.  You walk forever and ever in front of the same looping background.  However, you are left with a complete but simple game but most importantly, a framework of code that can be expanded upon to build much more complex games.  It also illustrates program flow, drawing sprites, playing music, changing states, handling input and all the other things a “full” game has to do.

 

In addition to the code, all of the assets used are available on GitHub.  This includes my incredible title music, the Blend files used for the main character and the level scene.  Everything you need to create this game is there in the Assets folder.  Feel free to play around and use it however you want.  That said, the textures just came from Google Image Search, so no clue if there is a copyright on any of them, so don’t use them in a commercial project! I believe all of my Github stuff is set to Creative Commons license…  if it’s not, assume you can do anything you want with it and that you have absolutely no warranty.

 

Ok, enough preamble, let’s jump right in!  The tutorial is available in two parts on YouTube in 1080p ( or embedded below):

 

 

Following are the game itself, then the source listings, finally the two videos in an embedded player.

 

EXTREME WALKING SIMULATOR!

 

EDIT: Removed to prevent music auto playing, to play the game click here instead. Warning, loud

Controls:

  • Click the title screen to get started
  • Tap right arrow to start walking/speed up
  • Tap left arrow to slow down/stop
  • Press ESC to stop the torture!

 

 

The Source Code

 

index.html

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Hello Phaser</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="phaser.js"></script>
    <script src="GameObjects/MyScene.js"></script>
    <script src="GameObjects/Player.js"></script>
    <script src="States/TitleScreenState.js"></script>
    <script src="States/GamePlayState.js"></script>
    <script src="States/GameOverState.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

 

app.ts

module Game {
    export class ExtremeWalkingSimulator {
        game: Phaser.Game;


        constructor() {
            this.game = new Phaser.Game(1280, 720, Phaser.AUTO, 'content', {
                create: this.create, preload: this.preload
            });
        }

        preload() {
            // Graphics
            this.game.load.image("title", "Graphics/TitleScreen.png");
            this.game.load.image("scene", "Graphics/scene720p.png");
            this.game.load.image("gameover", "Graphics/GameOver.png");

            //Spritesheets
            this.game.load.atlasXML("HERO_WALKING", "Graphics/Hero_Walking.png", "Graphics/Hero_Walking.xml");
            this.game.load.atlasXML("HERO_IDLE", "Graphics/Hero_Idle.png", "Graphics/Hero_Idle.xml");

            // Audio
            this.game.load.audio("TitleSong", ["Sounds/TitleSong.mp3", "Sounds/TitleSong.ogg",
"Sounds/TitleSong.wav"]); } create() { this.game.state.add("TitleScreenState", GameFromScratch.TitleScreenState, true); this.game.state.add("GamePlayState", GameFromScratch.GamePlayState, false); this.game.state.add("GameOverState", GameFromScratch.GameOverState, false); this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; } } } window.onload = () => { var game = new Game.ExtremeWalkingSimulator(); };

 

Player.ts

module GameFromScratch {
    export enum PlayerState { IDLE, WALKING }

    export class Player extends Phaser.Sprite {
        game: Phaser.Game;
        playerState: PlayerState;
        RIGHT_ARROW: Phaser.Key;
        LEFT_ARROW: Phaser.Key;
        ESCAPE: Phaser.Key;
        walkingSpeed: number;

        public static MAX_SPEED: number = 30;

        constructor(game: Phaser.Game, x: number, y: number) {
            this.game = game;

            
            this.walkingSpeed = 0;

            //Wire up input handlers
            this.RIGHT_ARROW = this.game.input.keyboard.addKey(Phaser.Keyboard.RIGHT);
            this.RIGHT_ARROW.onDown.add(Player.prototype.MoveRight, this);

            this.LEFT_ARROW = this.game.input.keyboard.addKey(Phaser.Keyboard.LEFT);
            this.LEFT_ARROW.onDown.add(Player.prototype.MoveLessRight, this);

            this.ESCAPE = this.game.input.keyboard.addKey(Phaser.Keyboard.ESC);
            this.ESCAPE.onDown.add(Player.prototype.GameOver, this);
            super(game, x, y, "HERO_WALKING", 0);

            this.anchor.set(0.0, 1.0);
            this.StartIdle();
        }

        update() {
            if (this.playerState == PlayerState.WALKING) {
                this.x += (this.walkingSpeed / Player.MAX_SPEED) * (60 / this.game.time.elapsedMS);

                // This logic depends on scene being added first.
                var stageWidth = this.game.stage.getChildAt(0).getBounds().width;
                if (this.x > stageWidth * .75)
                    this.x = stageWidth * .25;
            }
            super.update();
        }

        // Worse function name ever!
        MoveLessRight() {
            if (this.playerState != PlayerState.IDLE) {
                this.walkingSpeed--;
                if (this.walkingSpeed > 0)
                    this.animations.currentAnim.speed = this.walkingSpeed;
                else
                    this.StartIdle();
            }
        }

        MoveRight() {
            if (this.playerState == PlayerState.IDLE) {
                this.StartWalking();
            }
            else {
            if (this.walkingSpeed < Player.MAX_SPEED)
                this.walkingSpeed++;
                this.animations.currentAnim.speed = this.walkingSpeed;
            }
        }

        StartWalking() {
            this.playerState = PlayerState.WALKING;
            this.walkingSpeed = 5;
            this.loadTexture("HERO_WALKING", 0);
            this.animations.add("walk");
            this.animations.play("walk", this.walkingSpeed, true);
        }

        StartIdle() {
            this.loadTexture("HERO_IDLE", 0);
            this.playerState = PlayerState.IDLE;
            this.animations.add("Idle");
            this.animations.play("Idle",15,true);
        }

        GameOver() {
            this.game.state.start("GameOverState");
        }

    }
}

 

MyScene.ts

module GameFromScratch {

    export class MyScene extends Phaser.Sprite {
        game: Phaser.Game;
        nextFrame: Phaser.Sprite;

        constructor(game: Phaser.Game, x: number, y: number) {
            super(game, x, y, "scene", 0);
            this.nextFrame = new Phaser.Sprite(this.game, this.width, 0, "scene", 0);
            this.game.add.existing(this.nextFrame);
        }
    }
}

 

TitleScreenState.ts

module GameFromScratch {
    export class TitleScreenState extends Phaser.State {
        game: Phaser.Game;
        music: Phaser.Sound;

        constructor() {
            super();
        }

        titleScreenImage: Phaser.Sprite;

        preload() {

        }
        create() {
            this.titleScreenImage = this.add.sprite(0, 0, "title");
            this.titleScreenImage.scale.setTo(this.game.width/this.titleScreenImage.width, this.game.height
/
this.titleScreenImage.height); this.music = this.game.add.audio("TitleSong"); this.music.volume = 100; this.music.loop = true; this.music.play(); this.input.onTap.addOnce(this.titleClicked, this); } titleClicked() { this.music.stop(); this.game.state.start("GamePlayState"); } } }

 

GamePlayState.ts

module GameFromScratch {
    export class GamePlayState extends Phaser.State {
        game: Phaser.Game;
        player: GameFromScratch.Player;
        myScene: GameFromScratch.MyScene;

        constructor() {
            super();
        }

        preload() {
        }
        create() {
            this.myScene = new MyScene(this.game, 0, 0);
            this.player = new Player(this.game, 0, this.game.height - 50);

            this.game.add.existing(this.myScene);
            this.game.add.existing(this.player);

            this.game.world.setBounds(0,0,this.myScene.width * 2, this.myScene.height);
            this.game.camera.follow(this.player);
        }
    }
}

 

GameOverState.ts

module GameFromScratch {
    export class GameOverState extends Phaser.State {
        game: Phaser.Game;
        gameOverSprite: Phaser.Sprite;

        constructor() {
            super();
        }

        preload() {
        }
        create() {
            this.gameOverSprite = this.add.sprite(0, 0, "gameover", 0);
            this.gameOverSprite.scale.setTo(this.game.width / this.gameOverSprite.width, this.game.height /
this.gameOverSprite.height); this.input.onDown.add(() => { this.game.state.start("TitleScreenState", true); }, this);; } } }

 

 

 

The Videos

 

Part One:

 

Part Two:

Programming


AppGameKit Studio

See More Tutorials on DevGa.me!

Month List