zimper v0.13.5

zimper

A small module to structure && organize zimjs based HTML5 games.

Get Started

    const zimper = require('zimper');

    ///  Support loading by segments
    const assets = {
        segment_1: {
            fonts: {
                MSB: 'xxx/MSB.otf',
            },
            sounds: {
                audio_segment_11: 'xxx',
                audio_segment_12: 'xxx',
                audio_segment_13: 'xxx',
            },
            spritesheet: {
                json: null,
                imgurls: [],
            },
        },
        segment_2: {
            fonts: null,
            sounds: {
                audio_segment_21: 'xxx',
            },
            spritesheet: {
                json: 'xxx',
                imgurls: 'xxx',
            },
        },
        segment_3: {
            fonts: null,
            sounds: {
                audio_segment_31: 'xxx',
                audio_segment_32: 'xxx',
            },
            spritesheet: {
                json: 'xxx',
                imgurls: 'xxx',
            },
        },
    };

    zimper.init({
        width: 750,
        height: 1334,
        spritesheet: assets.segment_1.spritesheet,
        sounds: assets.segment_1.sounds,
        fonts: assets.segment_1.fonts,
        gpu: false,
        outerColor: '#000',
        color: '#000', ///window.__app.themeColor, /// '#e86136',
        bitmaps: [
            {
                key: 'player',
                url: 'https://i.imgur.com/w9IgyPV.png',
            }
        ],
        onProgress(progress) {},
    })
    .then(game => {
        /// Now a player bitmap can be accessed by game.frame.bitmap.loaded.player

        game.addScene('start', require('xxx/start'));
        game.addScene('intro', require('xxx/intro'));
        game.goto('start');
    })
    .catch(console.error);

Scenes

Scenes are nothing but pure Javascript objects with properties and methods which serve as the building blocks of zimpler powered HTML5 games.

Scene Properties:

frame (object)

/-------------------------------------------------------------------- frame augments zimjs frame, check zimjs docs for more details. --------------------------------------------------------------------/

frame.stage                    **(object)**

frame.sprites                  **(object)**

frame.sprites.new(id)          **(function)**    Returns a sprite whuch extends zim.Sprite with a **go()** method

frame.bitmap                   **(object)**

frame.bitmap.load(targets)     **(function)** Returns a Promise and adds the loaded zim.Bitmaps to frame.bitmap.loaded for later access

frame.bitmap.loaded(key)       **(function)**

frame.bitmap.fromUrl(url)      **(function)**

frame.sound                    **(object)**

frame.sound.play(id, conf)     **(function)**

frame.sound.stop(id)           **(function)**

frame.sound.pause(id)          **(function)**

frame.sound.resume(id)         **(function)**

Scene Methods:

width()

height()

left()

top()

goto(key) Switches to another scene

preload() 設定 scene assets 啟動 onProgress() 並且在 assets 載入完成後才呼叫 onCreate()

update() important If onUpdate() is not implemented, you should call update() manually to rerender the canvas.

Scene Event Methods:

onPreload()

onProgress(progress)

onCreate()

onDestory()

onFocus()

onBlur()

onUpdate() important If onUpdate() is set to null, you should call update() manually.

Example

Run-time Loading

    {
        onPreload() {
            /// 設定 preload 資源
            this.preload({
                fonts: '...',
                sounds: {},
                spritesheet: {},
            });
        },
        onProgress(progress) {
        },
        onCreate() {
            /// 動態載入資源
            this.frame.loadGameAssets({
                fonts: '...',
                sounds: {},
                spritesheet: {},
            });
        },
        onUpdate() {
        },
        onFocus() {
        },
        onBlur() {
        },
        onDestory() {
        },
    }

Positioning

    /// 844/1627
    console.log(this.width, '/', this.height)

    /// iPhone 6/7/8: 344/667
    /// iPhone X: 375/812
    console.log(window.innerWidth, '/', window.innerHeight)

    /// iPhone 6/7/8: 46/146
    /// iPhone X: 46/0
    console.log(this.left, '/', this.top)

    /// iPhone 6/7/8: 把物件放在螢幕最左上角
    this.frame.sprites.new('xxx').addTo().pos(46, 146);

    /// iPhone X: 把物件放在螢幕最左上角
    this.frame.sprites.new('xxx').addTo().pos(46, 0);

    /// In general: 把物件放在螢幕最左上角
    this.frame.sprites.new('xxx').addTo().pos(0 + this.left, 0 + this.top);

Load zim.Bitmap from URL

    this.frame.bitmap.load({key: 'test', url: 'https://i.imgur.com/w07f1fk.png'}).then(bmp => {
        console.log(bmp, this.frame.bitmap.loaded)
    }).catch(console.log);

Load zim.Bitmap from Data URL

    const dataURL = 'xxxx';

    zim.Bitmap.fromData(dataURL, bitmap => {
        /// Use bitmap ...
    });

直式/橫式安全互換策略

1. 以中心點為參考原點來定位

2. 與 this.left 和 this.top 相關的物件，需要在 resize 事件中重新定位

    this.frame.on('resize', () => {
        this._oleft = this.frame.offset.left;
        this._otop = this.frame.offset.top;
        some_object.pos(this._oleft, this._otop);
    });