有三种管理精灵的方法
SpriteManager
1 .管理单个精灵，单个精灵图的大小是一样的
2 .精灵的大小会受z轴位置的影响，总的来说就是距离镜头越远，精灵越小
驯服一团火
const fire=new BABYLON.SpriteManager('fireManager','url',1,128)
let fire1=new BABYLON.Sprite('fire',fire)
fire1.playAnimation(0,63,true,64)
fire.png
3 .驯服人物，根据状态切换不同的动画.我要做的仅仅是改变状态,其余的不需要管
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Babylon Template</title>
<style>
html,
body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
</head>
<body>
<canvas id="renderCanvas" touch-action="none"></canvas>
<script>
const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas, true);
const createScene = function () {
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
const fire=new BABYLON.SpriteManager('fireManager','player.png',1,64)
let player=new BABYLON.Sprite('fire',fire)
function runLeft(){
player.playAnimation(0,9,true,100)
}
function jump(){
player.playAnimation(10,22,false,100)
}
let playState=0
let changeState=0
window.addEventListener(('keydown'),(e)=>{
console.log(e.keyCode)
const code=e.keyCode
if(code==65){
// runLeft()
if(playState!==1){
changeState=1
}
// 改变玩家的状态为奔跑
}
if(code==32){
// jump()
if(playState!==2){
changeState=2
}
// 改变玩家的状态为
}
})
scene.onBeforeRenderObservable.add(()=>{
if(changeState!=playState){
// 进行动画改变
if(changeState==1){
runLeft()
playState=1
}
if(changeState==2){
jump()
playState=2
}
}
})
return scene;
};
const scene = createScene();
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
SpritePackedManager
1 .sprite图像大小不一致，这时会打包成一个speitesheet以及一个json文件来告诉图像对应的文件位置
SpriteMap
1 .当你需要再屏幕上快速渲染数千个精灵动画的时候。
网友评论