阿里开源游戏引擎 Hilo

2019-08-02 · 大约 1800 个字 · 预计 9 分钟读完

HelloWorld

Hilo 的库是模块化的，下载地址：https://github.com/hiloteam/Hilo/tree/dev/build

Hilo 除了提供一个独立无依赖的版本（Standalone）外，还提供AMD、CommonJS、CMD、CommonJS等多种模块范式的版本。开发者可以根据自己的习惯，下载Hilo的不同范式版本使用。

1
2
3
4
5
6
7
hilo/
└── build/
    ├── standalone/     #Standalone独立版本
    ├── amd/            #RequireJS(AMD) 版本
    ├── commonjs/       #CommonJS 版本
    ├── kissy/          #SeaJS(CMD) 版本
    └── cmd/            #Kissy 版本

我们暂不考虑其他范式版本，引入 hilo-standalone 独立版本。

1
<script type="text/javascript" src="hilo-standalone.js"></script>

最基础的 Hilo 必须包含舞台（Stage），定时器（Ticker），可是对象（View）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body onload="init();">
    <div id="game-container"></div>
    <script type="text/javascript">
        function init(){
            //初始化舞台
            var stage = new Hilo.Stage({
                renderType: 'canvas',
                container: 'game-container',
                width: 320,
                height: 480
            });

            //启动舞台定时器
            var ticker = new Hilo.Ticker(20);
            ticker.addTick(stage);
            ticker.start();

            //创建一个图片对象
            var bmp = new Hilo.Bitmap({
                image: 'fish.png',
                rect: [0, 0, 174, 126],
                x: 75,
                y: 50
            }).addTo(stage);
        }
    </script>
</body>

上面我们将一个长图（包含很多精灵的动作）显示第一帧，然后将舞台绑定到 game-container 中，实际上在里面创建了一个 canvas 对象。