Added some examples
BIN
examples/lib-test/favicon.png
Normal file
After Width: | Height: | Size: 264 B |
13
examples/lib-test/index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Game</title>
|
||||||
|
<link rel="stylesheet" href="res/main.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="board">
|
||||||
|
<!-- Renderer will push content here -->
|
||||||
|
</div>
|
||||||
|
<script type="module" src="src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
19
examples/lib-test/package.json
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"name": "asdf-lib-test",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Library test",
|
||||||
|
"main": "index.html",
|
||||||
|
"directories": {
|
||||||
|
"lib": "lib"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"test": "na"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"library",
|
||||||
|
"test",
|
||||||
|
"asdf"
|
||||||
|
],
|
||||||
|
"author": "Arne van Iterson",
|
||||||
|
"license": "ISC"
|
||||||
|
}
|
BIN
examples/lib-test/res/images/building.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
examples/lib-test/res/images/characters.png
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
examples/lib-test/res/images/rc2000.png
Normal file
After Width: | Height: | Size: 57 KiB |
BIN
examples/lib-test/res/images/rick.png
Normal file
After Width: | Height: | Size: 44 KiB |
BIN
examples/lib-test/res/images/spaceship.png
Normal file
After Width: | Height: | Size: 405 B |
BIN
examples/lib-test/res/images/tiles_packed.png
Normal file
After Width: | Height: | Size: 20 KiB |
17
examples/lib-test/res/main.css
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
body {
|
||||||
|
background-color: rgba(42, 42, 46, 1);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
-moz-user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
#board {
|
||||||
|
position: relative;
|
||||||
|
background-color: #111;
|
||||||
|
width: max-content;
|
||||||
|
height: auto;
|
||||||
|
margin: auto;
|
||||||
|
border: 5px solid whitesmoke;
|
||||||
|
}
|
48
examples/lib-test/src/main.js
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
import asdf from "../../../asdf/index.js";
|
||||||
|
const { Game, Container, CanvasRenderer, math, KeyControls, MouseControls, Text, Texture, Sprite } = asdf;
|
||||||
|
|
||||||
|
const game = new Game(640, 320, false);
|
||||||
|
const { scene, w, h } = game;
|
||||||
|
|
||||||
|
const buildings = scene.add(new Container());
|
||||||
|
const makeRandom = (b, x) => {
|
||||||
|
b.scale.x = math.randf(1,3);
|
||||||
|
b.scale.y = math.randf(1,3);
|
||||||
|
b.pos.x = x;
|
||||||
|
b.pos.y = h - b.scale.y * 64;
|
||||||
|
};
|
||||||
|
|
||||||
|
for (let x = 0; x < 50; x++) {
|
||||||
|
const b = buildings.add(new Sprite(new Texture("res/images/building.png")));
|
||||||
|
makeRandom(b, math.rand(w));
|
||||||
|
}
|
||||||
|
|
||||||
|
var rotation = 0;
|
||||||
|
const ship = new Sprite(new Texture("res/images/spaceship.png"));
|
||||||
|
ship.pivot = { x: 16, y: 16 };
|
||||||
|
scene.add(ship);
|
||||||
|
|
||||||
|
|
||||||
|
game.run((dt ,t) => {
|
||||||
|
ship.update = function(dt, t) {
|
||||||
|
const {scale} = this;
|
||||||
|
scale.x = Math.abs(Math.sin(t)) + 1;
|
||||||
|
scale.y = Math.abs(Math.sin(t)) + 1;
|
||||||
|
|
||||||
|
rotation = rotation + 0.2;
|
||||||
|
ship.rotation = rotation;
|
||||||
|
|
||||||
|
ship.pos.y = (Math.abs(Math.sin(t))) * 50 + (h / 2) - 16;
|
||||||
|
ship.pos.x += dt * 50;
|
||||||
|
if (ship.pos.x > w) {
|
||||||
|
ship.pos.x = -32;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
buildings.map(b => {
|
||||||
|
b.pos.x -= 100 * dt;
|
||||||
|
if (b.pos.x < -80) {
|
||||||
|
makeRandom(b,w);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
41
examples/tile-test/entities/King.js
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
import asdf from "../../../asdf/index.js";
|
||||||
|
const { TileSprite, Texture, math } = asdf;
|
||||||
|
const texture = new Texture("./res/images/characters.png");
|
||||||
|
|
||||||
|
class King extends TileSprite {
|
||||||
|
constructor () {
|
||||||
|
super(texture, 32, 32);
|
||||||
|
this.scale = { x: 2, y: 2 };
|
||||||
|
|
||||||
|
this.rate = 0.1;
|
||||||
|
this.frames = [
|
||||||
|
{ x: 0, y: 1 },
|
||||||
|
{ x: 1, y: 1 },
|
||||||
|
{ x: 2, y: 1 },
|
||||||
|
{ x: 3, y: 1 }
|
||||||
|
];
|
||||||
|
this.curTime = 0;
|
||||||
|
this.curFrame = math.rand(0, this.frames.length);
|
||||||
|
this.frame = this.frames[this.curFrame];
|
||||||
|
|
||||||
|
this.speed = math.rand(20, 100)
|
||||||
|
this.pos.y = math.rand(-16, 304);
|
||||||
|
this.pos.x = math.rand(-32, 640);
|
||||||
|
}
|
||||||
|
update (dt, t) {
|
||||||
|
const { rate, frames } = this;
|
||||||
|
this.curTime += dt;
|
||||||
|
if (this.curTime > rate) {
|
||||||
|
this.frame = frames[this.curFrame++ % frames.length];
|
||||||
|
this.curTime -= rate;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.pos.x += (dt * this.speed);
|
||||||
|
if (this.pos.x > 640 + 32) {
|
||||||
|
this.pos.y = math.rand(-16, 304);
|
||||||
|
this.pos.x = -32;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default King;
|
41
examples/tile-test/entities/Snake.js
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
import asdf from "../../../asdf/index.js";
|
||||||
|
const { TileSprite, Texture, math } = asdf;
|
||||||
|
const texture = new Texture("./res/images/characters.png");
|
||||||
|
|
||||||
|
class Snake extends TileSprite {
|
||||||
|
constructor () {
|
||||||
|
super(texture, 32, 32);
|
||||||
|
this.scale = { x: 2, y: 2 };
|
||||||
|
|
||||||
|
this.rate = 0.1;
|
||||||
|
this.curTime = 0;
|
||||||
|
this.curFrame = 0;
|
||||||
|
this.frames = [
|
||||||
|
{ x: 0, y: 3 },
|
||||||
|
{ x: 1, y: 3 },
|
||||||
|
{ x: 2, y: 3 },
|
||||||
|
{ x: 3, y: 3 }
|
||||||
|
];
|
||||||
|
this.frame = this.frames[this.curFrame];
|
||||||
|
|
||||||
|
this.speed = math.rand(50, 100)
|
||||||
|
this.pos.y = math.rand(0, 320);
|
||||||
|
this.pos.x = math.rand(-32, 320);
|
||||||
|
}
|
||||||
|
update (dt, t) {
|
||||||
|
const { rate, frames } = this;
|
||||||
|
this.curTime += dt;
|
||||||
|
if (this.curTime > rate) {
|
||||||
|
this.frame = frames[this.curFrame++ % frames.length];
|
||||||
|
this.curTime -= rate;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.pos.x += (dt * this.speed);
|
||||||
|
if (this.pos.x > 640 + 32) {
|
||||||
|
this.pos.y = math.rand(-16, 304);
|
||||||
|
this.pos.x = -32;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Snake;
|
BIN
examples/tile-test/favicon.png
Normal file
After Width: | Height: | Size: 264 B |
13
examples/tile-test/index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Game</title>
|
||||||
|
<link rel="stylesheet" href="res/main.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="board">
|
||||||
|
<!-- Renderer will push content here -->
|
||||||
|
</div>
|
||||||
|
<script type="module" src="src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
21
examples/tile-test/package.json
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"name": "asdf-tile-test",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Spritesheet test",
|
||||||
|
"main": "index.html",
|
||||||
|
"directories": {
|
||||||
|
"lib": "lib"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"test": "na"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"spritesheet",
|
||||||
|
"opengameart",
|
||||||
|
"tile",
|
||||||
|
"test",
|
||||||
|
"asdf"
|
||||||
|
],
|
||||||
|
"author": "Arne van Iterson",
|
||||||
|
"license": "ISC"
|
||||||
|
}
|
BIN
examples/tile-test/res/images/building.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
examples/tile-test/res/images/characters.png
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
examples/tile-test/res/images/rc2000.png
Normal file
After Width: | Height: | Size: 57 KiB |
BIN
examples/tile-test/res/images/rick.png
Normal file
After Width: | Height: | Size: 44 KiB |
BIN
examples/tile-test/res/images/tiles_packed.png
Normal file
After Width: | Height: | Size: 20 KiB |
17
examples/tile-test/res/main.css
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
body {
|
||||||
|
background-color: rgba(42, 42, 46, 1);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
-moz-user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
#board {
|
||||||
|
position: relative;
|
||||||
|
background-color: #111;
|
||||||
|
width: max-content;
|
||||||
|
height: auto;
|
||||||
|
margin: auto;
|
||||||
|
border: 5px solid whitesmoke;
|
||||||
|
}
|
25
examples/tile-test/src/main.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import asdf from "../../../asdf/index.js";
|
||||||
|
const { Game, Container, CanvasRenderer, math, KeyControls, MouseControls, Text, Texture, Sprite, TileSprite } = asdf;
|
||||||
|
|
||||||
|
const game = new Game(640, 320, true);
|
||||||
|
const { scene, w, h } = game;
|
||||||
|
|
||||||
|
import King from "../entities/King.js";
|
||||||
|
import Snake from "../entities/Snake.js";
|
||||||
|
|
||||||
|
var snake = new Snake();
|
||||||
|
console.log(snake);
|
||||||
|
scene.add(snake);
|
||||||
|
|
||||||
|
|
||||||
|
for (let index = 0; index < 250; index++) {
|
||||||
|
scene.add(new King());
|
||||||
|
}
|
||||||
|
|
||||||
|
const mouseAim = new MouseControls();
|
||||||
|
|
||||||
|
game.run((dt ,t) => {
|
||||||
|
if (mouseAim.isDown) {
|
||||||
|
console.log('cliccccccccccc');
|
||||||
|
}
|
||||||
|
});
|
13
examples/tilemap-test/index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Game</title>
|
||||||
|
<link rel="stylesheet" href="res/main.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="board">
|
||||||
|
<!-- Renderer will push content here -->
|
||||||
|
</div>
|
||||||
|
<script type="module" src="src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
BIN
examples/tilemap-test/res/images/allSprites_default.png
Normal file
After Width: | Height: | Size: 109 KiB |
189
examples/tilemap-test/res/images/allSprites_default.xml
Normal file
@ -0,0 +1,189 @@
|
|||||||
|
<TextureAtlas imagePath="allSprites_default.png">
|
||||||
|
<SubTexture name="barrelBlack_side.png" x="513" y="407" width="20" height="28"/>
|
||||||
|
<SubTexture name="barrelBlack_top.png" x="507" y="515" width="24" height="24"/>
|
||||||
|
<SubTexture name="barrelGreen_side.png" x="513" y="319" width="20" height="28"/>
|
||||||
|
<SubTexture name="barrelGreen_top.png" x="507" y="443" width="24" height="24"/>
|
||||||
|
<SubTexture name="barrelRed_side.png" x="414" y="371" width="20" height="28"/>
|
||||||
|
<SubTexture name="barrelRed_top.png" x="507" y="491" width="24" height="24"/>
|
||||||
|
<SubTexture name="barrelRust_side.png" x="512" y="40" width="20" height="28"/>
|
||||||
|
<SubTexture name="barrelRust_top.png" x="507" y="467" width="24" height="24"/>
|
||||||
|
<SubTexture name="barricadeMetal.png" x="479" y="499" width="28" height="28"/>
|
||||||
|
<SubTexture name="barricadeWood.png" x="479" y="527" width="28" height="28"/>
|
||||||
|
<SubTexture name="bulletBlue1.png" x="356" y="555" width="4" height="10"/>
|
||||||
|
<SubTexture name="bulletBlue1_outline.png" x="544" y="26" width="8" height="14"/>
|
||||||
|
<SubTexture name="bulletBlue2.png" x="532" y="48" width="8" height="12"/>
|
||||||
|
<SubTexture name="bulletBlue2_outline.png" x="438" y="455" width="12" height="16"/>
|
||||||
|
<SubTexture name="bulletBlue3.png" x="500" y="130" width="4" height="14"/>
|
||||||
|
<SubTexture name="bulletBlue3_outline.png" x="513" y="202" width="8" height="18"/>
|
||||||
|
<SubTexture name="bulletDark1.png" x="386" y="393" width="4" height="10"/>
|
||||||
|
<SubTexture name="bulletDark1_outline.png" x="462" y="455" width="8" height="14"/>
|
||||||
|
<SubTexture name="bulletDark2.png" x="470" y="455" width="8" height="12"/>
|
||||||
|
<SubTexture name="bulletDark2_outline.png" x="196" y="544" width="12" height="16"/>
|
||||||
|
<SubTexture name="bulletDark3.png" x="435" y="231" width="4" height="14"/>
|
||||||
|
<SubTexture name="bulletDark3_outline.png" x="531" y="517" width="8" height="18"/>
|
||||||
|
<SubTexture name="bulletGreen1.png" x="435" y="245" width="4" height="10"/>
|
||||||
|
<SubTexture name="bulletGreen1_outline.png" x="532" y="160" width="8" height="14"/>
|
||||||
|
<SubTexture name="bulletGreen2.png" x="521" y="202" width="8" height="12"/>
|
||||||
|
<SubTexture name="bulletGreen2_outline.png" x="172" y="544" width="12" height="16"/>
|
||||||
|
<SubTexture name="bulletGreen3.png" x="471" y="283" width="4" height="14"/>
|
||||||
|
<SubTexture name="bulletGreen3_outline.png" x="492" y="130" width="8" height="18"/>
|
||||||
|
<SubTexture name="bulletRed1.png" x="382" y="393" width="4" height="10"/>
|
||||||
|
<SubTexture name="bulletRed1_outline.png" x="344" y="551" width="8" height="14"/>
|
||||||
|
<SubTexture name="bulletRed2.png" x="336" y="551" width="8" height="12"/>
|
||||||
|
<SubTexture name="bulletRed2_outline.png" x="184" y="544" width="12" height="16"/>
|
||||||
|
<SubTexture name="bulletRed3.png" x="206" y="528" width="4" height="14"/>
|
||||||
|
<SubTexture name="bulletRed3_outline.png" x="484" y="130" width="8" height="18"/>
|
||||||
|
<SubTexture name="bulletSand1.png" x="352" y="555" width="4" height="10"/>
|
||||||
|
<SubTexture name="bulletSand1_outline.png" x="320" y="551" width="8" height="14"/>
|
||||||
|
<SubTexture name="bulletSand2.png" x="312" y="551" width="8" height="12"/>
|
||||||
|
<SubTexture name="bulletSand2_outline.png" x="450" y="455" width="12" height="16"/>
|
||||||
|
<SubTexture name="bulletSand3.png" x="471" y="297" width="4" height="14"/>
|
||||||
|
<SubTexture name="bulletSand3_outline.png" x="476" y="130" width="8" height="18"/>
|
||||||
|
<SubTexture name="crateMetal.png" x="479" y="471" width="28" height="28"/>
|
||||||
|
<SubTexture name="crateMetal_side.png" x="479" y="443" width="28" height="28"/>
|
||||||
|
<SubTexture name="crateWood.png" x="480" y="221" width="28" height="28"/>
|
||||||
|
<SubTexture name="crateWood_side.png" x="480" y="249" width="28" height="28"/>
|
||||||
|
<SubTexture name="explosion1.png" x="320" y="403" width="60" height="60"/>
|
||||||
|
<SubTexture name="explosion2.png" x="380" y="471" width="57" height="56"/>
|
||||||
|
<SubTexture name="explosion3.png" x="0" y="128" width="64" height="63"/>
|
||||||
|
<SubTexture name="explosion4.png" x="430" y="104" width="46" height="45"/>
|
||||||
|
<SubTexture name="explosion5.png" x="53" y="512" width="53" height="52"/>
|
||||||
|
<SubTexture name="explosionSmoke1.png" x="320" y="463" width="60" height="60"/>
|
||||||
|
<SubTexture name="explosionSmoke2.png" x="382" y="255" width="57" height="56"/>
|
||||||
|
<SubTexture name="explosionSmoke3.png" x="320" y="192" width="63" height="63"/>
|
||||||
|
<SubTexture name="explosionSmoke4.png" x="384" y="104" width="46" height="45"/>
|
||||||
|
<SubTexture name="explosionSmoke5.png" x="0" y="512" width="53" height="52"/>
|
||||||
|
<SubTexture name="fenceRed.png" x="158" y="528" width="48" height="16"/>
|
||||||
|
<SubTexture name="fenceYellow.png" x="158" y="512" width="52" height="16"/>
|
||||||
|
<SubTexture name="oilSpill_large.png" x="262" y="512" width="50" height="50"/>
|
||||||
|
<SubTexture name="oilSpill_small.png" x="158" y="544" width="14" height="14"/>
|
||||||
|
<SubTexture name="sandbagBeige.png" x="382" y="371" width="32" height="22"/>
|
||||||
|
<SubTexture name="sandbagBeige_open.png" x="354" y="527" width="42" height="28"/>
|
||||||
|
<SubTexture name="sandbagBrown.png" x="439" y="283" width="32" height="22"/>
|
||||||
|
<SubTexture name="sandbagBrown_open.png" x="312" y="523" width="42" height="28"/>
|
||||||
|
<SubTexture name="shotLarge.png" x="507" y="539" width="20" height="25"/>
|
||||||
|
<SubTexture name="shotOrange.png" x="514" y="289" width="16" height="28"/>
|
||||||
|
<SubTexture name="shotRed.png" x="508" y="221" width="21" height="38"/>
|
||||||
|
<SubTexture name="shotThin.png" x="546" y="160" width="8" height="26"/>
|
||||||
|
<SubTexture name="specialBarrel1.png" x="530" y="0" width="14" height="22"/>
|
||||||
|
<SubTexture name="specialBarrel1_outline.png" x="527" y="539" width="18" height="26"/>
|
||||||
|
<SubTexture name="specialBarrel2.png" x="544" y="108" width="12" height="24"/>
|
||||||
|
<SubTexture name="specialBarrel2_outline.png" x="513" y="174" width="16" height="28"/>
|
||||||
|
<SubTexture name="specialBarrel3.png" x="544" y="132" width="10" height="28"/>
|
||||||
|
<SubTexture name="specialBarrel3_outline.png" x="530" y="244" width="14" height="32"/>
|
||||||
|
<SubTexture name="specialBarrel4.png" x="544" y="244" width="10" height="32"/>
|
||||||
|
<SubTexture name="specialBarrel4_outline.png" x="530" y="276" width="14" height="36"/>
|
||||||
|
<SubTexture name="specialBarrel5.png" x="531" y="435" width="12" height="26"/>
|
||||||
|
<SubTexture name="specialBarrel5_outline.png" x="514" y="98" width="16" height="30"/>
|
||||||
|
<SubTexture name="specialBarrel6.png" x="544" y="276" width="8" height="26"/>
|
||||||
|
<SubTexture name="specialBarrel6_outline.png" x="533" y="312" width="12" height="30"/>
|
||||||
|
<SubTexture name="specialBarrel7.png" x="544" y="0" width="8" height="26"/>
|
||||||
|
<SubTexture name="specialBarrel7_outline.png" x="530" y="68" width="12" height="30"/>
|
||||||
|
<SubTexture name="tankBlue_barrel1.png" x="531" y="461" width="12" height="26"/>
|
||||||
|
<SubTexture name="tankBlue_barrel1_outline.png" x="514" y="259" width="16" height="30"/>
|
||||||
|
<SubTexture name="tankBlue_barrel2.png" x="545" y="302" width="8" height="26"/>
|
||||||
|
<SubTexture name="tankBlue_barrel2_outline.png" x="542" y="48" width="12" height="30"/>
|
||||||
|
<SubTexture name="tankBlue_barrel3.png" x="545" y="519" width="8" height="26"/>
|
||||||
|
<SubTexture name="tankBlue_barrel3_outline.png" x="543" y="459" width="12" height="30"/>
|
||||||
|
<SubTexture name="tankBody_bigRed.png" x="384" y="56" width="48" height="48"/>
|
||||||
|
<SubTexture name="tankBody_bigRed_outline.png" x="106" y="512" width="52" height="52"/>
|
||||||
|
<SubTexture name="tankBody_blue.png" x="396" y="527" width="38" height="38"/>
|
||||||
|
<SubTexture name="tankBody_blue_outline.png" x="426" y="149" width="42" height="42"/>
|
||||||
|
<SubTexture name="tankBody_dark.png" x="468" y="149" width="38" height="36"/>
|
||||||
|
<SubTexture name="tankBody_darkLarge.png" x="384" y="0" width="48" height="56"/>
|
||||||
|
<SubTexture name="tankBody_darkLarge_outline.png" x="382" y="311" width="52" height="60"/>
|
||||||
|
<SubTexture name="tankBody_dark_outline.png" x="384" y="149" width="42" height="40"/>
|
||||||
|
<SubTexture name="tankBody_green.png" x="476" y="283" width="38" height="36"/>
|
||||||
|
<SubTexture name="tankBody_green_outline.png" x="435" y="191" width="42" height="40"/>
|
||||||
|
<SubTexture name="tankBody_huge.png" x="380" y="403" width="58" height="68"/>
|
||||||
|
<SubTexture name="tankBody_huge_outline.png" x="320" y="331" width="62" height="72"/>
|
||||||
|
<SubTexture name="tankBody_red.png" x="479" y="407" width="34" height="36"/>
|
||||||
|
<SubTexture name="tankBody_red_outline.png" x="476" y="0" width="38" height="40"/>
|
||||||
|
<SubTexture name="tankBody_sand.png" x="476" y="94" width="38" height="36"/>
|
||||||
|
<SubTexture name="tankBody_sand_outline.png" x="437" y="517" width="42" height="40"/>
|
||||||
|
<SubTexture name="tankDark_barrel1.png" x="543" y="342" width="12" height="26"/>
|
||||||
|
<SubTexture name="tankDark_barrel1_outline.png" x="514" y="68" width="16" height="30"/>
|
||||||
|
<SubTexture name="tankDark_barrel2.png" x="545" y="398" width="8" height="26"/>
|
||||||
|
<SubTexture name="tankDark_barrel2_outline.png" x="531" y="373" width="12" height="30"/>
|
||||||
|
<SubTexture name="tankDark_barrel3.png" x="553" y="519" width="8" height="26"/>
|
||||||
|
<SubTexture name="tankDark_barrel3_outline.png" x="543" y="429" width="12" height="30"/>
|
||||||
|
<SubTexture name="tankGreen_barrel1.png" x="533" y="403" width="12" height="26"/>
|
||||||
|
<SubTexture name="tankGreen_barrel1_outline.png" x="515" y="377" width="16" height="30"/>
|
||||||
|
<SubTexture name="tankGreen_barrel2.png" x="553" y="398" width="8" height="26"/>
|
||||||
|
<SubTexture name="tankGreen_barrel2_outline.png" x="530" y="98" width="12" height="30"/>
|
||||||
|
<SubTexture name="tankGreen_barrel3.png" x="552" y="276" width="8" height="26"/>
|
||||||
|
<SubTexture name="tankGreen_barrel3_outline.png" x="531" y="487" width="12" height="30"/>
|
||||||
|
<SubTexture name="tankRed_barrel1.png" x="531" y="347" width="12" height="26"/>
|
||||||
|
<SubTexture name="tankRed_barrel1_outline.png" x="514" y="0" width="16" height="30"/>
|
||||||
|
<SubTexture name="tankRed_barrel2.png" x="546" y="212" width="8" height="26"/>
|
||||||
|
<SubTexture name="tankRed_barrel2_outline.png" x="543" y="368" width="12" height="30"/>
|
||||||
|
<SubTexture name="tankRed_barrel3.png" x="553" y="302" width="8" height="26"/>
|
||||||
|
<SubTexture name="tankRed_barrel3_outline.png" x="532" y="128" width="12" height="30"/>
|
||||||
|
<SubTexture name="tankSand_barrel1.png" x="532" y="22" width="12" height="26"/>
|
||||||
|
<SubTexture name="tankSand_barrel1_outline.png" x="515" y="347" width="16" height="30"/>
|
||||||
|
<SubTexture name="tankSand_barrel2.png" x="546" y="186" width="8" height="26"/>
|
||||||
|
<SubTexture name="tankSand_barrel2_outline.png" x="542" y="78" width="12" height="30"/>
|
||||||
|
<SubTexture name="tankSand_barrel3.png" x="552" y="0" width="8" height="26"/>
|
||||||
|
<SubTexture name="tankSand_barrel3_outline.png" x="543" y="489" width="12" height="30"/>
|
||||||
|
<SubTexture name="tank_bigRed.png" x="210" y="512" width="52" height="52"/>
|
||||||
|
<SubTexture name="tank_blue.png" x="432" y="48" width="42" height="46"/>
|
||||||
|
<SubTexture name="tank_dark.png" x="434" y="311" width="42" height="46"/>
|
||||||
|
<SubTexture name="tank_darkLarge.png" x="383" y="192" width="52" height="60"/>
|
||||||
|
<SubTexture name="tank_green.png" x="434" y="357" width="42" height="46"/>
|
||||||
|
<SubTexture name="tank_huge.png" x="320" y="255" width="62" height="76"/>
|
||||||
|
<SubTexture name="tank_red.png" x="474" y="48" width="38" height="46"/>
|
||||||
|
<SubTexture name="tank_sand.png" x="437" y="471" width="42" height="46"/>
|
||||||
|
<SubTexture name="tileGrass1.png" x="192" y="384" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass2.png" x="192" y="320" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_roadCornerLL.png" x="64" y="320" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_roadCornerLR.png" x="64" y="384" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_roadCornerUL.png" x="0" y="64" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_roadCornerUR.png" x="192" y="256" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_roadCrossing.png" x="0" y="319" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_roadCrossingRound.png" x="64" y="0" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_roadEast.png" x="64" y="128" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_roadNorth.png" x="192" y="192" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_roadSplitE.png" x="192" y="64" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_roadSplitN.png" x="192" y="128" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_roadSplitS.png" x="64" y="64" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_roadSplitW.png" x="64" y="256" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_roadTransitionE.png" x="192" y="0" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_roadTransitionE_dirt.png" x="320" y="64" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_roadTransitionN.png" x="320" y="0" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_roadTransitionN_dirt.png" x="256" y="448" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_roadTransitionS.png" x="256" y="384" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_roadTransitionS_dirt.png" x="256" y="320" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_roadTransitionW.png" x="256" y="256" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_roadTransitionW_dirt.png" x="256" y="192" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_transitionE.png" x="256" y="128" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_transitionN.png" x="256" y="64" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_transitionS.png" x="256" y="0" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileGrass_transitionW.png" x="192" y="448" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileSand1.png" x="128" y="0" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileSand2.png" x="64" y="448" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileSand_roadCornerLL.png" x="0" y="255" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileSand_roadCornerLR.png" x="0" y="191" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileSand_roadCornerUL.png" x="0" y="0" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileSand_roadCornerUR.png" x="0" y="383" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileSand_roadCrossing.png" x="320" y="128" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileSand_roadCrossingRound.png" x="128" y="448" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileSand_roadEast.png" x="128" y="384" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileSand_roadNorth.png" x="128" y="320" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileSand_roadSplitE.png" x="128" y="256" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileSand_roadSplitN.png" x="128" y="192" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileSand_roadSplitS.png" x="128" y="128" width="64" height="64"/>
|
||||||
|
<SubTexture name="tileSand_roadSplitW.png" x="128" y="64" width="64" height="64"/>
|
||||||
|
<SubTexture name="tracksDouble.png" x="438" y="403" width="41" height="52"/>
|
||||||
|
<SubTexture name="tracksLarge.png" x="439" y="231" width="41" height="52"/>
|
||||||
|
<SubTexture name="tracksSmall.png" x="476" y="319" width="37" height="52"/>
|
||||||
|
<SubTexture name="treeBrown_large.png" x="64" y="192" width="64" height="64"/>
|
||||||
|
<SubTexture name="treeBrown_leaf.png" x="312" y="512" width="8" height="10"/>
|
||||||
|
<SubTexture name="treeBrown_small.png" x="479" y="371" width="36" height="36"/>
|
||||||
|
<SubTexture name="treeBrown_twigs.png" x="506" y="130" width="26" height="22"/>
|
||||||
|
<SubTexture name="treeGreen_large.png" x="0" y="447" width="64" height="64"/>
|
||||||
|
<SubTexture name="treeGreen_leaf.png" x="328" y="555" width="8" height="10"/>
|
||||||
|
<SubTexture name="treeGreen_small.png" x="477" y="185" width="36" height="36"/>
|
||||||
|
<SubTexture name="treeGreen_twigs.png" x="506" y="152" width="26" height="22"/>
|
||||||
|
<SubTexture name="wireCrooked.png" x="432" y="0" width="44" height="48"/>
|
||||||
|
<SubTexture name="wireStraight.png" x="529" y="174" width="17" height="70"/>
|
||||||
|
</TextureAtlas>
|
BIN
examples/tilemap-test/res/images/building.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
examples/tilemap-test/res/images/characters.png
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
examples/tilemap-test/res/images/rc2000.png
Normal file
After Width: | Height: | Size: 57 KiB |
BIN
examples/tilemap-test/res/images/rick.png
Normal file
After Width: | Height: | Size: 44 KiB |
BIN
examples/tilemap-test/res/images/tiles.png
Normal file
After Width: | Height: | Size: 820 B |
BIN
examples/tilemap-test/res/images/tiles_packed.png
Normal file
After Width: | Height: | Size: 20 KiB |
17
examples/tilemap-test/res/main.css
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
body {
|
||||||
|
background-color: rgba(42, 42, 46, 1);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
-moz-user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
#board {
|
||||||
|
position: relative;
|
||||||
|
background-color: #111;
|
||||||
|
width: max-content;
|
||||||
|
height: auto;
|
||||||
|
margin: auto;
|
||||||
|
border: 5px solid whitesmoke;
|
||||||
|
}
|
28
examples/tilemap-test/src/main.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import asdf from "../../../asdf/index.js";
|
||||||
|
const { Game, Container, CanvasRenderer, math, KeyControls, MouseControls, Text, Texture, Sprite, TileSprite, TileMap, TileMapXML, SpriteSheetXML } = asdf;
|
||||||
|
|
||||||
|
const game = new Game(640, 320, true);
|
||||||
|
const { scene, w, h } = game;
|
||||||
|
|
||||||
|
const mouseAim = new MouseControls();
|
||||||
|
|
||||||
|
const tanksTexture = new Texture("./res/images/allSprites_default.png")
|
||||||
|
const tanksXml = new SpriteSheetXML("./res/images/allSprites_default.xml");
|
||||||
|
const map = { x: 640 / 64, y: 320 / 64 };
|
||||||
|
|
||||||
|
// Make a random level of tile indexes
|
||||||
|
const level = [
|
||||||
|
135, 135, 135, 135, 135, 135, 135, 135, 135, 135,
|
||||||
|
135, 135, 135, 135, 135, 135, 135, 135, 135, 135,
|
||||||
|
158, 158, 158, 158, 158, 158, 158, 158, 158, 158,
|
||||||
|
160, 160, 160, 160, 160, 160, 160, 160, 160, 160,
|
||||||
|
160, 160, 160, 160, 160, 160, 160, 160, 160, 160,
|
||||||
|
];
|
||||||
|
|
||||||
|
scene.add(new TileMapXML(level, map.x, map.y, tanksTexture, tanksXml));
|
||||||
|
|
||||||
|
game.run((dt, t) => {
|
||||||
|
if (mouseAim.isDown) {
|
||||||
|
console.log('cliccccccccccc');
|
||||||
|
}
|
||||||
|
});
|