68 lines
2.0 KiB
Vue
68 lines
2.0 KiB
Vue
<template>
|
|
<TilemapLayer ref="tilemapLayer" :tilemap="map" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" :tileset="data" />
|
|
<Player :layer="tilemapLayer" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { refObj, TilemapLayer, useScene } from 'phavuer'
|
|
import Player from '@/components/sprites/player/Player.vue'
|
|
import config from '@/config'
|
|
import type { Ref } from 'vue'
|
|
import Layer = Phaser.GameObjects.Layer
|
|
import Tileset = Phaser.Tilemaps.Tileset
|
|
|
|
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: Tileset|null = map.addTilesetImage('default', 'tiles');
|
|
const layer: Layer|null = map.createBlankLayer('layer', tileset);
|
|
|
|
scene.cameras.main.scrollX = - map.widthInPixels / 2;
|
|
scene.cameras.main.scrollY = - map.heightInPixels / 2;
|
|
|
|
console.log(layer);
|
|
|
|
const tilemapLayer: Ref<TilemapLayer|undefined> = 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);
|
|
});
|
|
});
|
|
|
|
// center camera
|
|
const centerY = (map.height * map.tileHeight) / 2
|
|
const centerX = (map.width * map.tileWidth) / 2
|
|
scene.cameras.main.centerOn(centerX, centerY)
|
|
|
|
|
|
/**
|
|
* Resources
|
|
* https://gist.github.com/veleek/3be73dc61d5f5a80abc0f72c3ffe390e
|
|
* https://gamedev.stackexchange.com/questions/116485/how-to-center-a-tilemap-in-phaser
|
|
*
|
|
*/
|
|
</script> |