官网
2.介绍
无依赖，模块化，小，兼容性良好，自动化构建，阿里巴巴集团开发的html5跨终端游戏框架，帮助快速开发html5游戏。支持多种模块规范的版本，目前公司开发游戏使用的是commonJS这种方式。
3.Hilo基本概念：
舞台（Stage）--是一个大的载体，所有要展现在页面中的内容都需要添加到舞台中，才会渲染。
定时器（Ticker）--舞台上的内容发生变化和运动，通过一定的频率一直刷新运行
可视对象（Bitmap）--舞台上的一切都是可是对象，图片，文字，雪碧图/精灵图
4.案例效果呈现概述
4.1启动项目
npm start // 启动项目
4.2可视对象原始状态：
x：100
y：100
scaleX: .2, //缩放比例
scaleY: .2 //缩放比例
4.3点击屏幕任意位置状态改变成：
x：100
y：100
scaleX: 1.4, //缩放比例
scaleY: 1.4 //缩放比例
5.目录结构
demo //项目名称
dist //静态资源文件
images //图片存放处
index.html //html入口文件
index.js //js入口文件
stage.js //舞台js
bird.js //可视对象js
6.demo代码解释
index.html
<html lang="en">
<head>
//提供有关页面的元信息（meta-information）针对搜索引擎和更新频度的描述和关键词
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1, viewport-fit=cover"
viewport-fit=cover>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
//页面标题
<title>hilo游戏开发</title>
<style>
body {
margin: 0;
}
</style>
// 引入hilo的类库
<script type="text/javascript" src="//enbrands.oss-cn-shenzhen.aliyuncs.com/javascripts/Hilo-1.1.10/build/standalone/hilo-standalone.js"></script>
</head>
<body>
<div id="game-container"></div> //父容器
</body>
//引入js入口文件
<script type="text/javascript" src="./index.js"></script>
</html>
index.js
import Hilo from 'Hilo'; //引入hilo
import Stage from './stage'; //引入舞台js
var stage = new Stage({ //实例化舞台
renderType:'canvas', // 渲染类型 可以是canvas || div
container: document.getElementById('game-container'), //父容器
width: document.documentElement.clientWidth, //舞台宽度，这里也可以写固定值
height: document.documentElement.clientHeight //舞台高度，这里也可以写固定值
});
stage.js
import Hilo from 'Hilo'; //引入hilo
import Bird from './bird'; //引入可视对象js
export default class Stage extends Hilo.Stage { //导出 Stage 这个类 这个类继承Hilo.Stage
constructor(props) {
super(props);
this.init(); //初始化
}
init() {
this.bird = new Bird({ //实例化可视对象
image: 'images/zong_king.png', //图片
y: 100, //坐标y
x: 100, //坐标x
scaleX: .2, //缩放比例
scaleY: .2 //缩放比例
}).addTo(this); //addTo()添加此对象到父容器
// 鼠标按下放大这个可视对象
document.addEventListener('touchstart', () => {
this.bird.bigger()
})
//缓动动画
var Tween = Hilo.Tween;
//设定舞台刷新频率为60fps
var ticker = new Hilo.Ticker(60);
// 把舞台加入到tick队列
ticker.addTick(this);
//需要把Tween加到ticker里才能使用缓动动画
ticker.addTick(Tween);
//启动ticker
ticker.start();
}
}
bird.js
import Hilo from 'Hilo'; //引入hilo
let Tween = Hilo.Tween; //缓动动画
export default class Bird extends Hilo.Bitmap { //导出 Bird 这个类 这个类继承Hilo.Bitmap
constructor(props) {
super(props);
}
//放大方法
bigger() {
//Tween.to创建一个缓动动画，让当前可视对象从当前属性（scaleX: .2,scaleY: .2）变换到目标属性（scaleX: 1.4, scaleY: 1.4）
Tween.to(this,
{ scaleX: 1.4, scaleY: 1.4 },
{
duration: 600, //完成这个变换的时长
})
}
}
7.总结
舞台只有一个
可视对象可以有无数个
针对不同的可视对象，君使其东而东之，使其西之而西之。
网友评论