精灵-地图
2022-10-23 本文已影响0人
skoll
<!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, 120, BABYLON.Vector3.Zero());
camera.attachControl(canvas, true);
const light = new BABYLON.PointLight("Point", new BABYLON.Vector3(5, 10, 5));
const spriteManager = new BABYLON.SpriteManager('people', 'http://127.0.0.1:8080/source/image/player.png', 10,
{
width: 64,
height: 64,
}
, scene)
const player = new BABYLON.Sprite('player', spriteManager)
player.position = new BABYLON.Vector3(0, 0, 1)
player.playAnimation(0, 40, true, 100)
const player2 = new BABYLON.Sprite('player2', spriteManager)
player2.position = new BABYLON.Vector3(1, 0, 4)
// player2.angle=Math.PI/4
player2.cellIndex = 10
// 上面是人物
let spriteSheet = new BABYLON.Texture('http://127.0.0.1:8080/source/image/legends.png', scene,
false,
false,
BABYLON.Texture.NEAREST_NEAREST,
null,
null,
null,
false,
BABYLON.Engine.TEXTURETYPE_RGBA
)
const assetsManager = new BABYLON.AssetsManager(scene)
let backgroundSize = new BABYLON.Vector2(55, 10)
const textTask = assetsManager.addTextFileTask('text task', 'http://127.0.0.1:8080/source/json/map.json')
textTask.onSuccess = ((task) => {
let json = JSON.parse(task.text)
let background = new BABYLON.SpriteMap('background', json, spriteSheet, {
stageSize: backgroundSize,
// 瓦片的数量
flipU: true,
baseTile: 42,
// 默认的瓦块
// 现在还有一个问题就是对应不上来，json和给的一张图
layerCount: 2,
colorMultiply: new BABYLON.Vector3(0.3, 0.3, 0.3),
maxAnimationFrames: 60,
}, scene)
for (let i = 1; i < background.spriteCount; i++) {
background.changeTiles(0, new BABYLON.Vector2(i + 1, backgroundSize.y - 1), i)
// 先把所有的都显示一遍
}
// 放置动画的地方
let eighth = 1 / 8
let speed = 0.005
// 所有水的动画
background.addAnimationToTile(1, 0, 2, eighth * 1, speed)
background.addAnimationToTile(1, 1, 3, eighth * 2, speed)
background.addAnimationToTile(1, 2, 4, eighth * 3, speed)
background.addAnimationToTile(1, 3, 5, eighth * 4, speed)
background.addAnimationToTile(1, 4, 6, eighth * 5, speed)
background.addAnimationToTile(1, 5, 7, eighth * 6, speed)
background.addAnimationToTile(1, 6, 8, eighth * 7, speed)
background.addAnimationToTile(1, 7, 1, 1, speed)
// 水管的动画
background.addAnimationToTile(25, 0, 26, eighth * 1, speed)
// 瓦片地图里面所有25帧的瓦片的地图，所以要动就是一起动，所以可能需要很多同样的图片，但是名字不一样，分别来做不同的状态
background.addAnimationToTile(25, 1, 27, eighth * 2, speed)
background.addAnimationToTile(25, 2, 28, eighth * 3, speed)
background.addAnimationToTile(25, 3, 29, eighth * 4, speed)
background.addAnimationToTile(25, 4, 30, eighth * 5, speed)
background.addAnimationToTile(25, 5, 31, eighth * 6, speed)
background.addAnimationToTile(25, 6, 29, eighth * 7, speed)
background.addAnimationToTile(25, 7, 25, 1, speed)
// 火的动画
background.addAnimationToTile(48, 0, 49, 0.25, speed)
background.addAnimationToTile(48, 1, 50, 0.5, speed)
background.addAnimationToTile(48, 2, 51, 0.75, speed)
background.addAnimationToTile(48, 4, 48, 1, speed)
background.addAnimationToTile(49, 0, 50, 0.25, speed * 0.5)
background.addAnimationToTile(49, 1, 51, 0.5, speed * 0.5)
background.addAnimationToTile(49, 2, 48, 0.75, speed * 0.5)
background.addAnimationToTile(49, 4, 49, 1, speed * 0.5)
background.addAnimationToTile(50, 0, 51, 0.25, speed * 0.3)
background.addAnimationToTile(50, 1, 48, 0.5, speed * 0.3)
background.addAnimationToTile(50, 2, 49, 0.75, speed * 0.3)
background.addAnimationToTile(50, 4, 50, 1, speed * 0.3)
// 水管
let tilePositions = []
for (let x = 5; x < backgroundSize.x-5; x++) {
if (x % 4 == 0) {
tilePositions.push(new BABYLON.Vector2(x,backgroundSize.y-3))
}
}
background.changeTiles(1, tilePositions, 25);
// 水
tilePositions = []
for (let x = 5; x < backgroundSize.x - 5; x++) {
for (let y = backgroundSize.y - 4; y > 0; y--) {
if (x % 4 == 0) {
tilePositions.push(new BABYLON.Vector2(x, y))
}
}
}
background.changeTiles(1, tilePositions, 1);
// 全部的水
background.position.z=5
// 第二层背景
// 关键是要有透明图层来透过后面的，这里不知道有没有办法只渲染透明那里表现的
let background2=new BABYLON.SpriteMap('background', json, spriteSheet, {
stageSize: backgroundSize,
// 瓦片的数量
flipU: true,
baseTile: 42,
// 默认的瓦块
// 现在还有一个问题就是对应不上来，json和给的一张图
layerCount: 2,
colorMultiply:new BABYLON.Vector3(0.6,0.6,0.6),
maxAnimationFrames: 60,
}, scene)
// 第二层上面掏孔
let background2TilePositions=[]
for(let x=5;x<backgroundSize.x-5;x++){
for(let y=backgroundSize.y-3;y>1;y--){
background2TilePositions.push(new BABYLON.Vector2(x,y))
}
}
background2.changeTiles(0,background2TilePositions,0)
background2.animationMap=background.animationMap
// 第二层上面加柱子
tilePositions=[]
for (let x = 10; x < backgroundSize.x - 5; x++) {
for (let y = backgroundSize.y - 3; y > 1; y--) {
if (x % 5 == 0) {
tilePositions.push(new BABYLON.Vector2(x, y))
}
}
}
background2.changeTiles(0,tilePositions,23)
// 柱子上面的装饰
tilePositions=[]
for (let x = 10; x < backgroundSize.x - 5; x++) {
if (x % 5 == 0) {
tilePositions.push(new BABYLON.Vector2(x, backgroundSize.y-3))
}
}
background2.changeTiles(0,tilePositions,22)
// 柱子下面的装饰
tilePositions=[]
for (let x = 10; x < backgroundSize.x - 5; x++) {
if (x % 5 == 0) {
tilePositions.push(new BABYLON.Vector2(x,2))
}
}
background2.changeTiles(0,tilePositions,24)
// 柱子上面的火把装饰
const pTiles=[48,49,50,48,49,50,48]
tilePositions=[]
for (let x = 10; x < backgroundSize.x - 5; x++) {
if (x % 10 == 0) {
background2.changeTiles(1,new BABYLON.Vector2(x,4),pTiles[Math.floor(Math.random()*pTiles.length)])
// 不改变原来的瓷砖，而是直接覆盖上去
}
}
// 第三层
const background3=new BABYLON.SpriteMap('levelStage',json,spriteSheet,{
stageSize:backgroundSize,
maxAnimationFrames:8,
baseTile:42,
layerCount:2,
flipU:true,
},scene)
background3.loadTileMaps('https://playground.babylonjs.com/textures/spriteMap/none_trimmed/levelStage.tilemaps')
// 也就是我们输出的地图可以保存在这里
background3.animationMap=background.animationMap
background3.position.z=-5
})
assetsManager.load()
scene.onBeforeRenderObservable.add(() => {
})
return scene;
};
const scene = createScene();
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
<!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 spriteManager=new BABYLON.SpriteManager('people','http://127.0.0.1:8080/source/image/player.png',10,
{
width:64,
height:64,
}
,scene)
const player=new BABYLON.Sprite('player',spriteManager)
player.position=new BABYLON.Vector3(0,0,1)
player.playAnimation(0,40,true,100)
const player2=new BABYLON.Sprite('player2',spriteManager)
player2.position=new BABYLON.Vector3(1,0,4)
// player2.angle=Math.PI/4
player2.cellIndex=10
// 上面是人物
let spriteSheet=new BABYLON.Texture('http://127.0.0.1:8080/source/image/legends.png',scene,
false,
false,
BABYLON.Texture.NEAREST_NEAREST,
null,
null,
null,
false,
BABYLON.Engine.TEXTURETYPE_RGBA
)
const assetsManager=new BABYLON.AssetsManager(scene)
const textTask=assetsManager.addTextFileTask('text task','http://127.0.0.1:8080/source/json/map.json')
textTask.onSuccess=((task)=>{
let json=JSON.parse(task.text)
console.log(json)
let backgroundSize=new BABYLON.Vector2(8,5)
let background=new BABYLON.SpriteMap('background',json,spriteSheet,{
stageSize:backgroundSize,
// 瓦片的数量
flipU:true,
baseTile:37,
// 默认的瓦块
// 现在还有一个问题就是对应不上来，json和给的一张图
layerCount:2,
colorMultiply: new BABYLON.Vector3(0.1, 0.5, 0.9),
maxAnimationFrames:60,
},scene)
for(let i=1;i<7;i++){
// background.changeTiles(0,new BABYLON.Vector2(i % 2, Math.floor(i / 2)),9)
background.changeTiles(0,new BABYLON.Vector2(i,3),20)
}
background.changeTiles(0,new BABYLON.Vector2(0,1),48)
let eighth=1/8
let speed=0.005
// background.addAnimationToTile(48, 0, 49, 0.25, speed)
// background.addAnimationToTile(48, 1, 50, 0.5, speed)
// background.addAnimationToTile(48, 2, 51, 0.75, speed)
// background.addAnimationToTile(48, 3, 48, 1, speed)
// background.addAnimationToTile(48, 0, 50, 0.25, speed * 0.5)
// background.addAnimationToTile(48, 1, 51, 0.5, speed * 0.5)
// background.addAnimationToTile(48, 2, 48, 0.75, speed * 0.5)
// background.addAnimationToTile(48, 4, 49, 1, speed * 0.5)
background.addAnimationToTile(48, 0, 51, 0.25, speed * 0.3)
background.addAnimationToTile(48, 1, 48, 0.5, speed * 0.3)
background.addAnimationToTile(48, 2, 49, 0.75, speed * 0.3)
background.addAnimationToTile(48, 4, 50, 1, speed * 0.3)
background.changeTiles(0, new BABYLON.Vector2(0, 0), 24);
})
assetsManager.load()
scene.onBeforeRenderObservable.add(() => {
})
return scene;
};
const scene = createScene();
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
