![見出し画像](https://assets.st-note.com/production/uploads/images/166353624/rectangle_large_type_2_9e88371f8ba32e0c8a5f074e2f852150.png?width=1200)
キャラクターのアニメーションとマップの表示
Phaser.jsを使いプログラミングを学べるゲームを開発していますが、ここ数日でTiledというソフトウェアを使い、画面にマッピングできるようになりました。
このソフトで色々なアイテムなどを配置し、JSONファイルが出力されるので、そのファイルをPhaser.jsに読み込むような形で実現できました。
![](https://assets.st-note.com/img/1734595753-50FufBapAgjcENqrxsTzMb78.png?width=1200)
ゲームとしては複数のステージがありゴールを目指すというミッションという形で色々な地形を作る必要があるため、Tiledを使ってその基盤を作っておこうと思い試行錯誤した結果まだ当たり判定などはこれからですが、とりあえずのレンダリングまでできました。
(sc/image-to-linear-filter this "super-platfomer-assets")
(let [map (sc/gen-tilemap this "demo")
spa-tileset (sc/add-tileset-image! map :super-platfomer-assets "super-platfomer-assets")]
(sc/create-layer! map "Background" spa-tileset 4)
(sc/create-layer! map "Ground" spa-tileset 4))
Phaser.jsをClojureScriptで触っていますが、Phaser.jsは痒い所に手が届くような形でストレスなく触れるエンジンですし、ClojureScriptはClojureScriptで楽しく書けるのでおすすめです。
まだ、プレイヤーをキー操作で動かせるようにしたり、プログラミングをブロックで表現できるようにする、などコアの部分がこれからなので年末にかけてそれらのベースとなる部分を実装し半年以内にSteamでの配信を行いたいと思います!