26. December 2016

How to build app with MobX annotations via webpack using Babel 6

I was searching for hints how to build games based on React. There is nice simple react-game-kit. The kit contains demo where you can as a player discover the kit itself.

Just type:

git clone git@github.com:FormidableLabs/react-game-kit.git
cd react-game-kit
npm install
npm start

Then you can open the demo in your browser: http://localhost:3000/

react-game-kit-demo

I was trying to build my own game based on code from react-game-kit. I hit one problem that webpack was not able to process MobX annotation @observable in GameStore.

Module build failed: SyntaxError: Unexpected token (4:2)

  2 | 
  3 | class GameStore {
> 4 |   @observable characterPosition = { x: 0, y: 0 };
    |   ^

The problem is described in MobX documentation. The annotation @observable is available only in ES7 which is fairly new. In case of Babel 5 or 6 you should use “Stage 0” processing.

Here is how to fix the problem:

npm install babel-plugin-transform-decorators-legacy --save-dev
npm install babel-preset-stage-0 --save-dev

The first package “transform-decorators-legacy” allows you to use decorators with Babel 6. The second package allows you to enable plugins in Stage 0 of build by Babel.

Then you need to tell webpack to use the plugin for decorators transform. Add list of plugins to query section of webpack.config.js:

...
  query: {
    presets: ['es2015', 'react'],
    plugins: ['transform-decorators-legacy', 'transform-class-properties']
  }
...

Now you can start the webpack and @observable will be processed.

If you want to learn more about MobX, there is nice tutorial at Egghead.io.

1. October 2016

Siriel 03 – Instantiate Prefab from C# in Unity

I was playing with idea to extend the game functionality by adding multi-player support early on. There is very nice tutorial Unite 2014 – New Unity Networking in 5.x., but I was missing one detail. How was Sean Riley able to instantiate game object from prefab. I always ended with some kind of exception or failure.

After several attempts to determine the root cause of my problem I stumbled upon this video “28.Unity Prefabs, Instantiate – Unity C# Scripting Tutorial Beginners” – from Charger Games. I was watching very closely and replayed the sequence several times to find the trick.

Here is whole process in slow motion.

1. Create Prefab from some game object. In my case I will focus on instantiating a pear.

2016-10-01-01-prefab

2. Create Empty Game Object and add component Script in C#.

2016-10-01-02-new-game-object

3. Open the script in editor.

using UnityEngine;
using System.Collections;

public class LevelControllerScript : MonoBehaviour {

    void Start () {
        
    }
	
    void Update () {

    }
}

4. Define public GameObject, save the code.

using UnityEngine;
using System.Collections;

public class LevelControllerScript : MonoBehaviour {

    public GameObject pear;

    void Start () {
        
    }
	
    void Update () {

    }
}

5. Go back to Unity Editor and watch the magic. 🙂

2016-10-01-03-new-attribute

6. Unity parsed the code and updated fields in Inspector panel. Drag you prefab and drop it into the new slot.

2016-10-01-04-drag-and-drop

7. Go back to the code and instantiate it.

using UnityEngine;
using System.Collections;

public class LevelControllerScript : MonoBehaviour {

    public GameObject pear;

    void Start () {
        Instantiate(pear);
    }

    void Update () {
        if (Input.GetKeyDown(KeyCode.Space))
        {
            Instantiate(pear);
        }
    }
}

That’s all. It reminds me of Xcode when you had to drag some stuff into sockets to bind it with code.

Here you can test updated version of Siriel.

During publishing this post I discovered issue with Unity that some assets are not properly loaded when switching between build for Desktop and WebGL. Read more at Unity forum about workaround.

26. September 2016

Siriel 02 – The flip trick or left and right animation

The character in two 2D game should be able to walk left and right. The movement could be underlined by animation to the left or right.

In old days when computers had very little computational power it was necessary to draw left and also the right animation as you can see in following sprite sheet.

avatar

Today you can save time for drawing one direction of animation and simply use the trick with flip. When direction changes just flip the image.

Here is code snippet from Unity C# script:

void Flip()
{
    Vector3 theScale = transform.localScale;
    theScale.x *= -1;
    transform.localScale = theScale;
}

The code and idea is from Unity Live training 16 2013 – 2D Character Controllers – time 42:30.

Here is the updated version 0.2 of Siriel with Flip function. I also fixed the RigidBody2D in z-axis to avoid flying around in different directions with the character.

25. September 2016

Siriel 01 – Unity experiment

Long long time ago I wrote a game engine for arcade game with name Siriel. The main character was inspired by small plush toy which was small tomato with hat. The name originated from one English lesson at school where we learned the word Cereal. I liked the sound so I made phonetic transcription to Slovak language and the main character was born. The whole game was inspired by series of Dizzy games from Code Masters. for Didaktik M (compatible model with ZX Spectrum).

My vision was to create the game engine which people can use to create their own Dizzy-like games. The Siriel 1 for PC was written in Pascal and it has very simple graphics with resolution 320×200. That was the technological maximum that I was able to achieve on 486 machine. After learning some Pascal and playing with Assembler I was able to get far better graphics and I wrote Siriel 2. The second game had just one scenario and it took about 20 minutes to play it. The result was better, but I wanted something more.

I found some special Pascal and Assembler units which were able to create game in far better resolution 640×480. It was also necessary to add some memory management module which played with extended memory in DOS, so the whole application was able to use more than 512 KB RAM. That was the foundation for Siriel 3.5 engine. The version “3.5” was inspired by Dizzy 3.5. I wrote 3 datatiscs for the game engine. The problem was that I reached the technological limits of Pascal with Assembler. The game was running only in DOS.

During my studies at university I made several attempts to reboot the game engine project. The first one was based on Allegro and C++. Both technologies seemed promising, but I felt into problem known as “paralysis by analysis”. I had temptation to add all features at once to the new engine. The engine Siriel 4 was working even on Linux. I had feeling that something is wrong. It was very hard to add anything into growing engine. Sprite animation was cumbersome.

Then I found PyGame which has promise of using incredible powers of Python while keeping great performance of C++. I made attempt to wrote engine in Python. The result was quite ok, but creating packages for different platforms was hard.

I put the idea with Siriel on back burner for several years. I was fascinated by Flex technology introduced by Adobe and it seems that it might be even right combination to build the game in it. I used Flixel and you can play one of attempts as small game PF 2010.

Unfortunately even this was blind path. Adobe discontinued all activities with Flex in favor to HTML5. It took about 6 years to web technologies to reach the similar state. Sure HTML5 is now much more flexible than Flex was before.

I was trying to implement games using jQuery, Angular, KiwiJS. Games were working. The technology was quite ok. But stuff like animation required a lot of effort.

Recently I decided to experiment with Unity 5. I was surprised how mature the technology is. In very short time I was able to import assets from the game that I wrote nearly 20 years ago and in few minutes get animation running. What was even more surprising for me was that Unity was able to produce packages for Windows, Linux, Mac, Android, iOS and WebGL.

Here is the result of the first experiment 🙂 There is just simple keyboard control. The main character is able to make at least some funny jumps.

10. February 2016

Story behind PF2016


Slides available in formats: PDF, SlideShare

Source code: GitHub/ysoftdevs/pf2016