0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Playdate】ゲーム一覧画面でのランチャーカードをデザイン

Posted at

sample_221220.gif

Playdateのゲーム一覧画面で表示されるランチャーカードと呼ばれるものですが、静止画カードだけでなく、アニメーションや選択時、起動中の表示・効果音なども設定することができます。
設定すべきものはゲームのメタ情報を管理するpdxinfoとディレクトリ構成となります。
まずメタ情報pdxinfoの設定から解説していきます。

name=myProjectName
author=sadakitchen
description=This is description
bundleID=com.sadakitchen.myProjectName
version=1.0
imagePath=meta/Assets
launchSoundPath=meta/Sounds/launch

imagePathがランチャーカードの画像ファイルの格納ディレクトリの基点です。
launchSoundPathは起動時に再生したいwavファイルの場所指定となります。wavファイルはplaydate用にコンバートされたものである必要があります。
コンバート方法はターミナルなどからffmpegを使用します。ターミナルで該当のディレクトリに移動してからコマンドを実行する流れとなります。

$ cd [変換したいファイルのあるディレクトリ]
$ ffmpeg -i [変換したいファイル名].mp3  -acodec adpcm_ima_wav [変換後のファイル名].wav

例ではmp3を変換していますが、wavなどでも可能です。

プロジェクト構造については以下のようになります。

myProjectName/
    source/
        main.lua
        Images/
            playerImage.png
            background.png
        meta/
            Assets/
                card.png  ← ランチャーカード
                card-highlighted/  ← 選択状態の連番アニメーション画像を格納
                    1.png
                    2.png
                    ...
                    animation.txt  ← アニメーションの再生制御
                card-pressed.png  ← 決定時表示する画像
                launchImages/  ← 読込中表示する画像
                    1.png
                    2.png
                    ...
            Sounds/
                launch.wav  ← 起動音

meta/Assetsにランチャーカードの各種画像ファイルを設置することになります。

  • card.png:ゲームの静止画ランチャーカード画像。一覧で表示される画像です。
  • card-highlighted/:ゲーム一覧画面で選択したときにアニメーション再生される連番画像を入れます。
    • animation.txt:連番アニメーションの設定するファイルです。(後述)
  • card-pressed.png:ゲーム一覧画面でAボタンをおして決定したときに表示される画像です。
  • launchImages/:ゲームの起動読込中にアニメーション表示される連番画像を入れます。ちなみに単一のlaunchImage.pngにすると静止画となります。

animation.txtの記述については以下のように記述します。

animation.txt
frames = 6x4, 7x4, 8x4, 9x4
introFrames = 1x4, 2x4, 3x4, 4x4, 5x4

framesはループさせたい連番画像を指定します。x#(#は数値)を連番の末尾につけると数値分のフレームを待機表示するようになります。
introFramesはルーム前に1回だけ再生される連番画像を指定します。こちらもframe同様x#で数値分のフレームを待機表示できます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?