当前标签 / WebGL / 总共1篇

阿里开源游戏引擎 Hilo

HelloWorld

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

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

hilo/
└── build/
    ├── standalone/     #Standalone独立版本
    ├── amd/            #RequireJS(AMD) 版本
    ├── commonjs/       #CommonJS 版本
    ├── kissy/          #SeaJS(CMD) 版本
    └── cmd/            #Kissy 版本

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

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

最基础的 Hilo 必须包含舞台(Stage), 定时器(Ticker),可是对象(View):

<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 对象。

阅读更多