2024/01/02

第6回 – PhaserでTiledを使ってみよう!(実装編)


Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 75

前回の記事では、TiledのインストールとMAPデータを入手するところまでやりました。
今回は入手したデータからMAPを作成し、実際にPhaserでMAP上でプレイヤーを動かしてみます。
やっとここまでたどり着いた感じです。

MAP画像データをコピー

入手したデータのMAP画像データを自分の任意のプロジェクトにコピーします。

Tiledを起動します。
「新しいマップ」選択し、タイトルの型式、マップの大きさ、タイルの大きさを指定して、OKを押してください。

「新しいタイルセット」選択してください。

MAPをデザインします。

「レイヤー」を選択し、レイヤー名を入力します。この例では「maneo_layer」です。

MAPをjsonでエクスポートします。

MAPを保存します。

PhaserでMAPを描画させる

TiledでMAPデータを作成したので、このMAPをPhaserで描画させます。

// マップデータをロード
this.load.tilemapTiledJSON('map', 'assets/tiled/maneo/maneo.json');
this.load.image('maneo_tileset', 'assets/tiled/maneo/tilemap.png');

// ゲームのマップとタイルを設定
Game.map = this.make.tilemap({ key: 'map' });
Game.tiles = Game.map.addTilesetImage('maneo_tileset');
const layer = Game.map.createLayer('maneo_layer', Game.tiles, 0, 0);
// スケールを2倍にする
layer.setScale(2);

setCollisionでキャラクタと衝突させるタイルをタイル番号でセットします。
番号は、左から右にシーケンシャルに振られます。MAPの赤枠で囲まれた右側から一番最初が1でその後13のタイルをセットします。

// 衝突するタイルの設定
Game.map.setCollision([1, 13]);
// ゲームにレイヤーを追加
Game.layer = layer;

Phaser Game

以上でやっとゲームらしくなってきましたね。
次回は、メニュー、スコアとか付けて、ちゃんと遊べるようにできるようがんばります!
以下、ソースコード全体を記載しておきます。

全体のコード

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phaser Game</title>
<!-- Phaser ライブラリの読み込み -->
<script src="//cdn.jsdelivr.net/npm/phaser@3.70.0/dist/phaser.js"></script>
</head>

<body>
<!-- ゲームコンテナのスタイル -->
<style>
#canvas {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
}
</style>

<!-- ゲームコンテナ -->
<div id="canvas"></div>

<!-- ゲームスクリプト -->
<script>
// ゲームのデータを保持するオブジェクト
let Game = {};

// ゲームのシーンを表すクラス
class Scene extends Phaser.Scene {

constructor() {
super({
key: 'Scene'
});
}

// ゲーム開始前の事前準備(アセットのロード)を行うメソッド
preload() {

// マップデータをロード
this.load.tilemapTiledJSON('map', 'assets/tiled/maneo/maneo.json');
this.load.image('maneo_tileset', 'assets/tiled/maneo/tilemap.png');

// プレイヤーのスプライトシートをロード
this.load.spritesheet('player', './assets/player.png', {
frameWidth: 48,
frameHeight: 48
});
}

// ゲームの初期化およびオブジェクトの生成を行うメソッド
create() {
// ゲームのマップとタイルを設定
Game.map = this.make.tilemap({ key: 'map' });
Game.tiles = Game.map.addTilesetImage('maneo_tileset');
const layer = Game.map.createLayer('maneo_layer', Game.tiles, 0, 0);
// スケールを2倍にする
layer.setScale(2);

// 衝突するタイルの設定
Game.map.setCollision([1, 13]);
// ゲームにレイヤーを追加
Game.layer = layer;

// プレイヤーの追加
Game.player = this.physics.add.sprite(160, 0, 'player', 0);
Game.player.setSize(16, 48);
//Game.player.setScale(2);

// プレイヤーのアニメーション設定
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('player', { start: 12, end: 14 }),
frameRate: 10,
repeat: -1
});

this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('player', { start: 6, end: 8 }),
frameRate: 10,
repeat: -1
});

// 衝突処理
this.physics.add.collider(Game.player, Game.layer, function (player, tile) {
// タイルに関する情報にアクセス
console.log('Player collided with tile:', tile);

// タイルのインデックスを取得
const tileIndex = tile.index;
console.log('Tile index:', tileIndex);
});

// カーソルキーのセットアップ
cursors = this.input.keyboard.createCursorKeys();


// デバッググラフィックスの設定
this.physics.world.debugGraphic = this.add.graphics();
this.physics.world.debugGraphic.setAlpha(0.5);

// 衝突タイルのデバッグ表示
Game.layer.renderDebug(this.physics.world.debugGraphic, {
tileColor: null,
collidingTileColor: new Phaser.Display.Color(243, 134, 48, 255),
faceColor: new Phaser.Display.Color(40, 39, 37, 255)
});

// プレイヤーのデバッグ表示
this.physics.world.debugGraphic.fillStyle(0xffff00, 0.9);
this.physics.world.debugGraphic.fillRect(Game.player.x, Game.player.y, Game.player.width, Game.player.height);

}

// ゲームの状態を更新するメソッド
update() {
// カーソルキーの入力に応じてプレイヤーを移動
if (cursors.left.isDown) {
Game.player.setVelocityX(-160);
Game.player.anims.play('left', true);
} else if (cursors.right.isDown) {
Game.player.setVelocityX(160);
Game.player.anims.play('right', true);
} else {
Game.player.setVelocityX(0);
}

// UPキーでplayerが地面に接しているとき
if (cursors.up.isDown && Game.player.body.onFloor()) {
// プレイヤーが地面に触れているときだけジャンプする
Game.player.setVelocityY(-400);
// プレイヤーを白くする。
Game.player.setTint(0xffffff);
}
}
}

// ゲームの設定情報を格納するオブジェクト
let config = {
type: Phaser.AUTO,
parent: 'canvas',
width: 32*14,
height:11*20,
pixelArt: true,
roundPixels: false,
antialias: false,
physics: {
default: 'arcade',
arcade: {
debug: true,
gravity: {
y: 600
}
}
},
scene: [Scene]
};

// ゲームオブジェクトの作成
let game = new Phaser.Game(config);

// カーソルキーの状態を保持する変数
let cursors;

// ウィンドウのリサイズイベントに対するリスナー
window.addEventListener('resize', function () {
// キャンバスのサイズを更新
game.canvas.width = window.innerWidth;
game.canvas.height = window.innerHeight;
game.renderer.resize(window.innerWidth, window.innerHeight);
});

</script>

</body>

</html>

Warning: [snuffleupagus][0.0.0.0][xxe][log] A call to libxml_disable_entity_loader was tried and nopped in /home/c3841116/public_html/honda-workshop.com/wp-content/themes/honda-workshop/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Reader/Security/XmlScanner.php on line 86

プロフィール

管理者 HONDA

福島県出身

ITで商売を効率化したいが、ITが苦手、分からない方是非ご相談ください。50過ぎの「おっさん」です。そのほうが話しやすい方はお勧めします。

カテゴリ

ファッション

美容

お酒


西暦和暦干支年齢対応表


設定

時計表示

都道府県

ブックマーク1

ブックマーク2

ブックマーク3

プライバシーポリシー

はじめに

HONDA WORK SHOPでは、ご利用のユーザ様個人情報の取り扱いに細心の注意を払っております。

また当サイトではアフィリエイトプログラムを利用しております。

第三者配信事業者(Amazonアソシエイト、楽天アフィリエイト、A8.net)がCookie を使用して、サイト利用者が当サイトや他のサイトに過去にアクセスした際の情報に基づいて広告を配信します。

Google が広告 Cookie を使用することにより、サイト利用者が当サイトや他のサイトにアクセスした際の情報に基づいて、Google やそのパートナーは適切な広告をサイト利用者に対して表示します。

広告設定でパーソナライズ広告を無効にすることができます。

Cookieの利用について

Cookieは、当サイトや他サイトへのアクセスに関する情報が含まれており、多くのサイトで利用者に有益な機能を提供する目的で使用されています。

Cookieには、サイト利用者の個人情報(氏名、住所、メールアドレス、電話番号)は一切含まれません。

アクセス解析ツールについて

当サイトでは、アクセス解析ツール「Google Analytics」を利用しています。

「Google Analytics」はトラフィックデータの収集のためにCookieを使用しています。

このトラフィックデータは匿名で収集されており、個人を特定するものではありません。

この機能はCookieを無効にすることで収集を拒否することができますので、ご利用のブラウザ設定をご確認のうえ、拒否設定を行ってください。

本ポリシーの変更

当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。

修正された最新のプライバシーポリシーは常に本ページにて開示されます。