mirror of
https://github.com/hiloteam/Hilo.git
synced 2025-12-08 20:35:59 +00:00
161 lines
4.9 KiB
HTML
161 lines
4.9 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1, maximum-scale=1" />
|
||
<title>Camera - Hilo Example</title>
|
||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||
<style>
|
||
#game-container{
|
||
border:solid 1px #000;
|
||
margin: 20px auto;
|
||
}
|
||
</style>
|
||
<script type="text/javascript" src="../build/standalone/hilo-standalone.min.js"></script>
|
||
<script type="text/javascript" src="../build/flash/hilo-flash.min.js" data-auto="true"></script>
|
||
</head>
|
||
<body onload="init();">
|
||
<div id="header">
|
||
<h1>Camera</h1>
|
||
<p>Camera摄像机，鼠标点击切换摄像机跟随对象</p>
|
||
</div>
|
||
<div id="game-container"></div>
|
||
<script>
|
||
stageWidth = 800;
|
||
stageHeight = 600;
|
||
</script>
|
||
<script type="text/javascript" src="js/demo.js"></script>
|
||
<script type="text/javascript">
|
||
function init(){
|
||
var Tween = Hilo.Tween;
|
||
var Camera = Hilo.Camera;
|
||
gameContainer.style.height = stageHeight + 'px';
|
||
var mapScale = 1.5;
|
||
var mapWidth = 1440*mapScale;
|
||
var mapHeight = 900*mapScale;
|
||
|
||
//init stage
|
||
var stage = new Hilo.Stage({
|
||
renderType:renderType,
|
||
container: gameContainer,
|
||
width: stageWidth,
|
||
height: stageHeight
|
||
});
|
||
|
||
//设置deadzone区域
|
||
var dw = 250, dh = 150;
|
||
var deadzone = [dw, dh, stageWidth - dw * 2, stageHeight - dh * 2];
|
||
|
||
//新建摄像机，设置边界，deadzone
|
||
var camera = new Camera({
|
||
width:stageWidth,
|
||
height:stageHeight,
|
||
bounds:[0, 0, mapWidth - stageWidth, mapHeight - stageHeight],
|
||
deadzone:deadzone
|
||
});
|
||
|
||
//创建地图
|
||
var map = new Hilo.Container().addTo(stage);
|
||
var bg = window.bg = new Hilo.Bitmap({
|
||
image: 'images/map.jpg',
|
||
scaleX:mapScale,
|
||
scaleY:mapScale
|
||
}).addTo(map);
|
||
|
||
|
||
//创建一只鱼
|
||
var fishSpeed = 2;
|
||
var fish0 = new Hilo.Bitmap({
|
||
image: 'images/fish.png',
|
||
rect: [0, 0, 174, 126],
|
||
x: 0,
|
||
y: 300,
|
||
scaleX:.7,
|
||
scaleY:.7,
|
||
pivotX:87,
|
||
pivotY:63,
|
||
onUpdate:function(){
|
||
this.x +=this.speed;
|
||
if(this.x > mapWidth || this.x < 0){
|
||
this.speed *= -1;
|
||
this.scaleX *= -1;
|
||
}
|
||
}
|
||
}).addTo(map);
|
||
fish0.speed = fishSpeed;
|
||
|
||
//摄像机跟谁鱼
|
||
camera.follow(fish0);
|
||
|
||
|
||
var ticker = new Hilo.Ticker(60);
|
||
ticker.addTick(stage);
|
||
ticker.addTick(camera);
|
||
ticker.addTick(Tween);
|
||
|
||
//map跟随摄像机滚动
|
||
ticker.addTick({
|
||
tick:function(){
|
||
map.x = - camera.scroll.x;
|
||
map.y = - camera.scroll.y;
|
||
}
|
||
});
|
||
|
||
//start stage ticker
|
||
ticker.start();
|
||
|
||
|
||
var fish1 = new Hilo.Bitmap({
|
||
image: 'images/fish.png',
|
||
rect: [0, 0, 174, 126],
|
||
x: 400,
|
||
y: 300,
|
||
scaleX:.7,
|
||
scaleY:.7,
|
||
pivotX:87,
|
||
pivotY:63,
|
||
rotation:90,
|
||
onUpdate:function(){
|
||
this.y +=this.speed;
|
||
if(this.y > mapHeight || this.y < 0){
|
||
this.speed *= -1;
|
||
this.scaleX *= -1;
|
||
}
|
||
}
|
||
}).addTo(map);
|
||
fish1.speed = fishSpeed;
|
||
|
||
//显示deadzone区域
|
||
stage.addChild(new Hilo.View({
|
||
x:camera.deadzone[0],
|
||
y:camera.deadzone[1],
|
||
width:camera.deadzone[2],
|
||
height:camera.deadzone[3],
|
||
background:"rgba(255, 0, 0, .3)"
|
||
}));
|
||
|
||
//切换摄像机跟随对象
|
||
var tween;
|
||
document.body.onclick = function(){
|
||
var target = camera.target == fish1?fish0:fish1;
|
||
var pos = {
|
||
x:camera.target.x,
|
||
y:camera.target.y
|
||
};
|
||
Tween.remove(tween);
|
||
tween = Tween.to(pos,{
|
||
x:target.x,
|
||
y:target.y
|
||
},{
|
||
duration:1000,
|
||
onComplete:function(){
|
||
camera.follow(target, deadzone);
|
||
}
|
||
})
|
||
camera.follow(pos, null);
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|