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

Tile work

Browse Source
This commit is contained in:
Dennis Postma
2024-04-25 23:09:24 +02:00
parent 890badac15
commit 1851cc4782
7 changed files with 172 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/App.vue
View File

@ -1,26 +1,9 @@
<script setup lang="ts">
import 'phaser';
import { Game, Scene, Rectangle } from 'phavuer'
import Example from './scenes/mapScene'
const gameConfig = {
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
width: 1280,
height: 720,
},
render: {
roundPixels: true,
},
pixelArt: true,
type: Phaser.AUTO,
scene: Example
}
</script>
<template>
<div class="game-container">
<Game :config="gameConfig" class="game" />
</div>
</template>
<!-- <Login />-->
<Screen />
</template>
<script setup lang="ts">
import Screen from '@/components/game/Screen.vue'
import Login from '@/components/screens/Login.vue'
</script>

26
src/components/game/Screen.vue Normal file
View File

@ -0,0 +1,26 @@
<script setup lang="ts">
import 'phaser';
import { Game, Scene, Rectangle } from 'phavuer'
import Example from '@/scenes/mapScene'
const gameConfig = {
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
width: 1280,
height: 720,
},
render: {
roundPixels: true,
},
pixelArt: true,
type: Phaser.AUTO,
scene: Example
}
</script>
<template>
<div class="game-container">
<Game :config="gameConfig" class="game" />
</div>
</template>

23
src/components/screens/Login.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<audio ref="bgm" id="bgm" src="@/assets/sound/bgm.mp3" loop autoplay></audio>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const bgm = ref(null)
const bgmStart = () => bgm.value.play();
onMounted(() => {
// check if bgm is playing already and do nothing
if (bgm.value.paused) {
window.addEventListener('click', () => bgm.value.play())
window.addEventListener('keydown', () => bgm.value.play())
window.addEventListener('mousemove', () => bgm.value.play())
}
})
</script>

37
src/scenes/mapScene.js
View File

@ -7,34 +7,41 @@ class Example extends Phaser.Scene
}
preload () {
this.load.image('tiles', '/assets/tilesets/iso-64x64-outside.png');
this.load.image('tiles', '/assets/tilesets/1.png');
}
/**
* tile width: 63,
* tile height: 32,
* total w: 640,
* total h: 4000,
*/
create () {
const mapData = new Phaser.Tilemaps.MapData({
width: 10,
height: 10,
tileWidth: 64,
width: 63,
height: 32,
tileWidth: 63,
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 tileset = map.addTilesetImage('1', '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 ]
[ 1, 2, 1, 1, 1, 1, 1, 1, 1, 1 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
];
let y = 0;