47 lines
1.5 KiB
Vue
47 lines
1.5 KiB
Vue
<template>
|
|
<TilemapLayer ref="tilemapLayer" :tilemap="map" :layerIndex="0" :cull-padding-x="50" :cull-padding-y="50" :tileset="data" />
|
|
<Player :layer="tilemapLayer" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { refObj, TilemapLayer, useScene } from 'phavuer'
|
|
import Player from '@/components/player/Player.vue'
|
|
import config from '@/config'
|
|
|
|
const scene = useScene()
|
|
const mapData = new Phaser.Tilemaps.MapData({
|
|
width: 10,
|
|
height: 10,
|
|
tileWidth: config.tile_size.x,
|
|
tileHeight: config.tile_size.y,
|
|
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
|
format: Phaser.Tilemaps.Formats.ARRAY_2D,
|
|
});
|
|
|
|
const { width: tileSizeWidth } = mapData;
|
|
const { width, height } = scene.cameras.main;
|
|
const map = new Phaser.Tilemaps.Tilemap(scene, mapData);
|
|
const tileset = map.addTilesetImage('default', 'tiles');
|
|
const layer = map.createBlankLayer('layer', tileset, -config.tile_size.x + width / 2, height / 2 - (config.tile_size.x * tileSizeWidth * 0.25));
|
|
|
|
const tilemapLayer = refObj();
|
|
|
|
const data = [
|
|
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
|
|
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
|
|
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
|
|
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
|
|
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
|
|
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
|
|
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
|
|
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
|
|
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 0 ],
|
|
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
|
|
];
|
|
|
|
data.forEach((row, y) => {
|
|
row.forEach((tile, x) => {
|
|
layer.putTileAt(tile, x, y);
|
|
});
|
|
});
|
|
</script> |