学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

Rails7.0 | Railsでゲームを作成 | 05 | Spritesとゲームリソース

04 | 開発スタート】 << 【ホーム】 >> 【06 | スタート画面


↓↓クリックして頂けると励みになります。


Spritesとは、コンピュータ上で動く図形を表現する際に、動かす図形と固定された背景とを別に作成し、ハードウェア上で合成することによって表示を高速化する手法です。


ゲームリソースは、ゲームを進行するうえで必要とされるゲーム内の資源や資産のことを指します。


「frontend」フォルダに「sprites」フォルダを新規作成します。
作成した「sprites」フォルダに、作成した画像を入れていきます。


itch.ioサイトで「Game assets」を選択し、無料のものをダウンロードします。
itch.io

今回は「16x16 DungeonTileset II」をダウンロードしました。

16x16 DungeonTileset II
16x16 DungeonTileset II



「No Thanks」をクリックすれば無料でダウンロードできます。

No Thanks
No Thanks



「0x72_DungeonTilesetII_v1.6.zip」をクリックします。

0x72_DungeonTilesetII_v1.6
0x72_DungeonTilesetII_v1.6



https://www.codeandweb.com/free-sprite-sheet-packerを開きます。
www.codeandweb.com


キャンバスをクリアします。

キャンバスをクリア
キャンバスをクリア



ダウンロードしたモンスターを全選択し、ドラッグ&ドロップします。

ドラッグ&amp;ドロップ
ドラッグ&ドロップ



Settingsでレイアウトを「Horizontal」にします。

レイアウト変更
レイアウト変更



「.png」をダウンロードして、名前を「ogre.png」にします。

pngダウンロード
pngダウンロード



このようにして、以下の画像を「sprites」フォルダに入れておいてください。

org.png
org.png
wall_right.png
wall_right.png
wizard.png
wizard.png
chest.png
chest.png
floor.png
floor.png
hole.png
hole.png
knight.png
knight.png
spikes.png
spikes.png
wall_fountain.png
wall_fountain.png
wall_left.png
wall_left.png
wall_mid.png
wall_mid.png


↓↓クリックして頂けると励みになります。



04 | 開発スタート】 << 【ホーム】 >> 【06 | スタート画面