旧プログラマーによる日曜プログラミング日記

趣味は作曲、自分で一から作りたがりのユーザIT子会社の旧プログラマーによるリハビリのための日曜プログラミング日記です。

Phaser3+typescriptでSRPGを開発してみる #006 JSONファイルの読込

本日はJSONの読み込みです。

Phaser3でのJSONファイルの読み込み方は簡単なのですが、それをtypescriptとしてどう扱うとバグが少ないコーディングができるのか、というところをお伝えしたいです。

これから暫くはメインはtypescriptです。

と言いながら、書いているうちにPhaser3におけるテキスト・画像の表示も書きたくなってしまいました。今度適当に分割するかもです。

JSONファイルの読込

  • JSONファイルの読込
    • 本日のファイル構成
    • Phaser3での読み込み方
      • 余談ですが
    • typescriptでのJSONの読み込み方
    • インターフェース(interface)とは
      • JSONをinterfaceを使って読み込む
      • preload()メソッドの動き(非同期?)
    • まとめ
      • 過去の日記
続きを読む

Phaser3+typescriptでSRPGを開発してみる #005 Tiledの利用

前回、2D MAPを描いたのですが、背景の黒が出てきたり困ってたところ、インターネットで情報を集めると、Tiledというソフトウェアが良さそうで、かつMacも使えそう!ということなので、今日は使ってみたいと思います。

マップ作成(2) Tiledの活用

  • マップ作成(2) Tiledの活用
    • 筆者の試行環境
    • Tiledのインストール
    • Tiledの使い方
      • (0) 日本語モード
      • (1) タイルセット読込
      • (2) マップの作成
      • (3) 描画
    • Phaserへの取込
      • ファイル構成
      • JSONを自動生成
      • ファイル保存形式
      • 自動生成されたjson
      • jsonファイルの解析
        • data
        • tilesets
      • typescript側の書き方
    • 完成
    • まとめ
      • 過去の日記
続きを読む

Phaser3+typescriptでSRPGを開発してみる #004 マップ作成

こんにちは!

次に着手したいのが、まずは動くものを作りたい、ということでタイルチップの読み込みです。

タイルチップとは、昔ながらの2D(3Dもそうかもですが)ゲームを作るときのバックの絵のことです。 スーパーマリオのブロックとか、ドラクエの地図マップとか、そんなイメージで、 SRPG作るときにもまず必要になりそうな気がします。

マップ作成(1)

  • マップ作成(1)
    • マップのタイルチップ
    • ライフサイクル
    • GameScene.ts
      • TilemapConfig
    • より複雑なマップに
      • 過去の日記
続きを読む

Phaser3+typescriptでSRPGを開発してみる #003 はじめてのPhaser3

今日ははじめてのPhaser3です。

はじめてのPhaser3

  • はじめてのPhaser3
    • フォルダ構成
    • index.html
    • index.ts / index.js
      • Scene
      • config定数
      • width/height
      • type
      • parent
      • scale
      • scenes
    • GameScene.ts
    • ビルド&テスト
    • まとめ
      • 過去の日記
続きを読む

Phaser3+typescriptでSRPGを開発してみる #002 環境設定

ということで、まずは環境設定からスタートしてみようかなと思います。

但し、まだ納得いく環境設定ができておらず、随時更新を入れようかと思います。

環境設定

  • 環境設定
    • 1. 前提条件
      • (1) MacOSX 10.14を使用
      • (2) Node.jsのインストール
      • (3) VSCodeのインストール
      • (4) VSCodeの設定
        • Node.js Modules Intellisenseのインストール
        • ESLintのインストール
    • 2. 手順
      • 1. プロジェクトを作る
      • 2. ターミナルで関連するライブラリを取得する
        • (1) npm初期化(package.jsonの作成)
        • (2) typescriptのインストール
        • (3) webpack関連のインストール
        • (4) Phaser3をインストールする
      • 3. 環境設定ファイルを作成・修正する
        • (1) webpack.config.js ファイルを作成
        • (2) package.jsonを修正する
        • (3) tsconfig.jsonを作成する
          • outDir
          • strict
          • paths
        • (4) launch.jsonに手を入れる
        • 過去の日記
続きを読む

Phaser3+typescriptでSRPGを開発してみる #001 プロローグ

プロローグ

はじめまして!

シミュレーションRPGが2021年で25周年とか。 リメイクがなかなか出ないことにしびれを切らし、理想的なシステムを実現したSRPGを作ろうと決めました。

とはいえ、筆者自身は40オーバーのおじさん。ユーザー系IT子会社の管理職です。 思いっきりJava1.4+Oracle9i世代のため最新のフロントエンドについていけておらず、 typescriptの勉強がてら、ゲームエンジンPhaser3を使って、作り始めました。

どこまで続くかわかりませんが、よろしくお願いします。

一応、すでにマップが表示されたり、カーソルが動いたり、ユニットのキャラが表示されること、 このくらいまでは実装できているので、ネタはそこそこあります。

Javascriptの非同期処理、Promiseの使い方、Browser表示におけるnode.jsライブラリの使い方等、 すでに何回も詰まって、多分20時間以上費やしてますので、 その辺りの解決へのプロセス等、覚えてる限り記録に残せたらと思います。

ということで、最初は環境設定から、、と思いますが、#002で述べたいと思います。

とはいえ、環境設定は未だに完全なものができていない状況。 もしかしたら、#003:はじめてのPhaser3から書き始めるかも。。

まあそれもご愛嬌ということで、ご容赦いただければ。

続きを読む