Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

8. January 2016

 

Special thanks to @Dillybob on Twitter for bringing this engine to my attention.  QICI Engine is a HTML5 game engine and toolset layered over top of Pixi and Phaser, a library I am a huge fan of.  The engine is well documented and completely free.  The source is available although oddly enough the Github page just contains prepackaged archives.

 

In their own words, QICI Engine is:

QICI Engine is a free and open source JavaScript game engine library with a web-based comprehensive suite of toolset for making HTML5 games.

With QICI Engine, creating HTML5 Games just like Web Development, use your favorite code editor, use your favorite web browser, leverage JavaScript language and all the best web development tools. QICI Engine takes care of the complexity of the underlying technologies, so you just focus on what's important - making your game!

Technology Stack

QICI Engine is based on the free and open source HTML5 game framework Phaser, which uses Pixi.js for WebGL and Canvas rendering across desktop and mobile web browsers.

Phaser is actively developed and maintained by @photonstorm, but QICI Engine uses the specific version Phaser 2.3.0. We keep track of bug fixes and performance improvements for Phaser, so you can use the customized Phaser version that QICI Engine provides safely.

QICI Engine is made up of three parts: QICI Core, QICI Widget and QICI Editor:

  • QICI Core: A JavaScript Game Engine library that is based on Phaser.
  • QICI Widget: A JavaScript UI library for creating rich application.
  • QICI Editor: A web-based editor with a Node.js server for accelerating HTML5 game development.

The QICI Core is the core of QICI Engine, the QICI Editor would not work without it, but the QICI Core can function on its own to be used to make a HTML5 Game by writing code without QICI Editor. But for complex UI, it’s really hard to build and maintain without the help of WYSIWYG visual interface, with QICI Editor even artists and designers can help to build the game’s UI.

QICI Widget provides the HTML5 UI widgets for making the GUI in QICI Editor.

QICI Core is a JavaScript Game library, QICI Widget is a JavaScript UI library, and QICI Editor uses Node.js for accessing the file system, so QICI Engine is a Full-Stack JavaScript Game Engine.

Features

 

 

Very cool project and certainly one I am checking out.  Oddly however, when you download the current version from their website, on first run they tell you an update is available and you download it.  I hate when this happens.

GameDev News ,

25. November 2015

 

Phaser, the popular open source HTML5 game engine, are having a 50% off Black Friday sale (*cough* It’s Wednesday btw… *cough*) with all of their items half price.  I'm a huge fan of Phaser, in fact did a complete tutorial series on using it, so love to see them get the support they deserve. 

 

Items on sale include:

  • Phaser Mega Bundle
  • Particle Storm particle system plugin
  • Virtual Joystick Plugin
  • Box2D Plugin (Premium/Standard)
  • Waveforms (pathing)
  • Interphase book

Click here to head on over to the sales page.  Also stay tuned for the real Black Friday, where I will attempt to gather all the game dev related deals together in one place.

GameDev News

22. October 2015

 

As part of the ongoing Tiled Map Editor tutorial this part looks at using Object Layers, which can be used to interface your tiled map with your games code.  This particular example includes the code using TypeScript and the Phaser game library.  If you need more information on Phaser I’ve done a tutorial series here.

 

The video of this tutorial is available here or embedded below.

 

The 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="app.js"></script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

app.ts

/// <reference path="phaser.d.ts"/>


class ObjectEntity {
    height: number;
    name: string;
    properties: any;
    rectange: boolean;
    rotation: number;
    type: string;
    visible: boolean;
    width: number;
    x: number;
    y: number;
}

class SimpleGame {
    game: Phaser.Game;
    map: Phaser.Tilemap;
    layer: Phaser.TilemapLayer;
    player: Phaser.Sprite;
    winZone: Phaser.Rectangle;

    constructor() {
        this.game = new Phaser.Game(640, 480, Phaser.AUTO, 'content', {
            create: this.create, preload:
            this.preload, update: this.update, render: this.render
        });
    }
    preload() {
        this.game.load.tilemap("ItsTheMap", "newMap.json", null, Phaser.Tilemap.TILED_JSON);
        var img = this.game.load.image("HF2_A2", "HF2_A2.png");
        this.game.load.image("Decepticon", "decepticonLarge.png");
    }
    update() {

        if (this.winZone.contains(this.player.x + this.player.width/2,this.player.y + this.player.height/2))
            alert("You Win!");

    }
    render() {
    }
    create() {
        this.map = this.game.add.tilemap("ItsTheMap", 32, 32, 64, 32);
        this.map.addTilesetImage("HF2_A2","HF2_A2");

        this.map.createLayer("Background").resizeWorld();

        this.player = new Phaser.Sprite(this.game, 0, 0, "Decepticon");
        this.player.width = 64;
        this.player.height = 64;
        this.game.world.addAt(this.player, 1);

        this.game.camera.follow(this.player);

        var something = this.map.objects["GameObjects"][0];
        var start = <ObjectEntity>this.map.objects["GameObjects"][0];
        var end = <ObjectEntity>this.map.objects["GameObjects"][1];


        this.winZone = new Phaser.Rectangle(end.x, end.y, end.width, end.height);

        this.player.position.set(start.x, start.y);

        this.game.input.keyboard.addKey(Phaser.Keyboard.LEFT).onUp.add(() => {
            this.player.position.add(-32, 0);
        });

        this.game.input.keyboard.addKey(Phaser.Keyboard.RIGHT).onUp.add(() => {
            this.player.position.add(32, 0);
        });

        this.game.input.keyboard.addKey(Phaser.Keyboard.UP).onUp.add(() => {
            this.player.position.add(0,-32);
        });

        this.game.input.keyboard.addKey(Phaser.Keyboard.DOWN).onUp.add(() => {
            this.player.position.add(0, 32);
        });
    }
}

window.onload = () => {
    var game = new SimpleGame();
};

 

 

The Video

 

Art, Design, Programming , , , ,

18. September 2015

 

The following is a video showing the process discussed in this earlier tutorial.  For all the source code mentioned, see the earlier link.

 

 

The video is also available in high definition here.

Programming , , ,

17. September 2015

 

Right off the hop, that title is a bit misleading…  Phaser doesn’t really support GLSL shaders, or at least not by that name.  What it supports is Filters, which it inherits from the Pixi renderer.  Right off the hop you should be aware that this only works on the WebGL renderer, so the fallback canvas renderer cannot and probably never will support filters.

 

This process isn’t overly difficult, but as far as I’ve been able to tell, there are no existing examples on using shaders/filters in Phaser with Typescript, so a few of the TypeScript specific aspects can cause a bit of a stumbling block.  For this first example I am simply going to port the gray filter example to TypeScript.  This filter simply turns whatever it is attached to gray, simple enough.  Let’s jump right in with the code:

/// <reference path="phaser.d.ts"/>


class Uniforms {
    gray: any;
}  
class MyShader extends Phaser.Filter {

    uniforms: Uniforms;

    constructor(game: Phaser.Game, uniforms: any, fragmentSource: string[]) {
        this.uniforms = new Uniforms();
        this.uniforms.gray = { type: '1f', value: 1.0 };

        this.fragmentSrc = [

            "precision mediump float;",

            "varying vec2       vTextureCoord;",
            "varying vec4       vColor;",
            "uniform sampler2D  uSampler;",
            "uniform float      gray;",

            "void main(void) {",
            "gl_FragColor = texture2D(uSampler, vTextureCoord);",
            "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126 * gl_FragColor.
                                r + 0.7152 * gl_FragColor.g + 0.0722 * 
                                gl_FragColor.b), gray);",
            "}"
        ];

        super(this.game, this.uniforms, this.fragmentSrc);
    }

}

class SimpleGame {
    game: Phaser.Game;
    image: Phaser.Sprite;
    myShader: MyShader;

    constructor() {
        this.game = new Phaser.Game(640, 480, Phaser.AUTO, 'content', {
            create: this.create, preload:
            this.preload,
            render: this.render
        });
    }
    preload() {
        this.game.load.image("logo","GFSLogo.png");
    }
    render() {
    }
    create() {
        this.image = this.game.add.sprite(0, 0, "logo");
        this.image.filters = [new MyShader(this.game, null, null)];
    }
}

window.onload = () => {
    var game = new SimpleGame();
};

 

The major difference here is we inherit from the Phaser.Filter class.  One other major difference, since TypeScript is a typed language, we need to specify our Uniforms as a class.  I took the lazy approach and made each parameter an any.  uniforms are paramaters passed in to the shader, although in this case Phaser itself passed in the value for vTextureCoord, vColor and uSampler.  It’s through using uniforms that your game logic can control the actions of the shader.

 

Next we define the fragment shader source as an array of strings.  Fragment shaders can be thought of little mini shader programs that are executed for each potentially drawn pixel in the resulting image.  This particular shader simply samples the current pixel at the current location within the texture and multiplies that value’s rgb by a slightly more “gray” version of itself.  gl_FragColor can be thought of as the return type of the fragment shader, and it contains that pixel to be displayed.  A discussion of GLSL is way beyond the scope of this tutorial but more details and resources are available here.

 

Finally in the actual game code you can see how the shader is applied to the image we loaded:

this.image.filters = [new MyShader(this.game, null, null)];

The .filters member is an array, so multiple filters can be applied if desired.  When you run this example you should see:

image

 

You can apply different shaders by changing the fragmentSrc value, just keep in mind you need to setup each parameter in the Uniforms class.

 

If the idea of encoding your shaders into a string array is off putting, there exists code to load shaders from file.

Programming ,

Month List

Popular Comments