noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added isometric tiles and scene

Browse Source
This commit is contained in:
Dennis Postma 2024-04-09 02:20:34 +02:00
parent c717ae64cc
commit 3fcd3e575e
6 changed files with 100 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<title>New Quest - Play</title>
</head>
<body>
<div id="app"></div>

27
package-lock.json generated
View File

@ -25,6 +25,8 @@
"eslint-plugin-vue": "^9.17.0",
"jsdom": "^24.0.0",
"npm-run-all2": "^6.1.2",
"phaser": "^3.80.1",
"phavuer": "^0.15.6",
"prettier": "^3.0.3",
"typescript": "~5.4.0",
"vite": "^5.1.6",
@ -3162,6 +3164,12 @@
"node": ">=0.10.0"
}
},
"node_modules/eventemitter3": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
"integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
"dev": true
},
"node_modules/execa": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
@ -4514,6 +4522,25 @@
"integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
"dev": true
},
"node_modules/phaser": {
"version": "3.80.1",
"resolved": "https://registry.npmjs.org/phaser/-/phaser-3.80.1.tgz",
"integrity": "sha512-VQGAWoDOkEpAWYkI+PUADv5Ql+SM0xpLuAMBJHz9tBcOLqjJ2wd8bUhxJgOqclQlLTg97NmMd9MhS75w16x1Cw==",
"dev": true,
"dependencies": {
"eventemitter3": "^5.0.1"
}
},
"node_modules/phavuer": {
"version": "0.15.6",
"resolved": "https://registry.npmjs.org/phavuer/-/phavuer-0.15.6.tgz",
"integrity": "sha512-/eSRACJVrf3NwYw55fpokZzm6kFBCOiKdV/CAl0grjdlENRFhR0vAS9LAU8mcLGNPdqkQMzUY8eC7y8BfJ5J+A==",
"dev": true,
"peerDependencies": {
"phaser": "^3.70.0",
"vue": "^3.3.13"
}
},
"node_modules/picocolors": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",

2
package.json
View File

@ -31,6 +31,8 @@
"eslint-plugin-vue": "^9.17.0",
"jsdom": "^24.0.0",
"npm-run-all2": "^6.1.2",
"phaser": "^3.80.1",
"phavuer": "^0.15.6",
"prettier": "^3.0.3",
"typescript": "~5.4.0",
"vite": "^5.1.6",

BIN
public/assets/tilesets/iso-64x64-outside.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

20
src/App.vue
View File

@ -1,8 +1,26 @@
<script setup lang="ts">
import Phaser from 'phaser';
import { Game, Scene, Rectangle } from 'phavuer'
import Example from './scenes/mapScene'
const gameConfig = {
width: '100%',
height: '100%',
pixelArt: true,
type: Phaser.AUTO,
scene: Example
}
// isometric
</script>
<template>
<Game :config="gameConfig">
<Scene name="MainScene">
<Rectangle :x="100" :y="100" :width="100" :height="100" :fillColor="0xAAAAAA" />
</Scene>
</Game>
</template>
<style scoped>

51
src/scenes/mapScene.js Normal file
View File

@ -0,0 +1,51 @@
import Phaser from 'phaser';
class Example extends Phaser.Scene
{
constructor () {
super();
}
preload () {
this.load.image('tiles', '/assets/tilesets/iso-64x64-outside.png');
}
create () {
const mapData = new Phaser.Tilemaps.MapData({
width: 10,
height: 10,
tileWidth: 64,
tileHeight: 32,
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
format: Phaser.Tilemaps.Formats.ARRAY_2D
});
const map = new Phaser.Tilemaps.Tilemap(this, mapData);
const tileset = map.addTilesetImage('iso-64x64-outside', 'tiles');
const layer = map.createBlankLayer('layer', tileset, 350, 200);
const data = [
[ 10, 11, 12, 13, 14, 15, 16, 10, 11, 12 ],
[ 13, 11, 10, 12, 12, 15, 16, 10, 16, 10 ],
[ 12, 10, 16, 13, 14, 15, 16, 16, 13, 12 ],
[ 10, 11, 12, 13, 14, 15, 16, 10, 11, 12 ],
[ 13, 11, 10, 12, 12, 15, 16, 10, 16, 10 ],
[ 12, 10, 16, 13, 14, 15, 16, 16, 13, 12 ],
[ 10, 11, 12, 13, 14, 15, 16, 10, 11, 12 ],
[ 13, 11, 10, 12, 12, 15, 16, 10, 16, 10 ],
[ 12, 10, 16, 13, 14, 15, 16, 16, 13, 12 ],
[ 10, 11, 12, 13, 14, 15, 16, 10, 11, 12 ]
];
let y = 0;
data.forEach(row => {
row.forEach((tile, x) => {
layer.putTileAt(tile, x, y);
});
y++;
});
}
}
export default Example;