mimipy は、ブラウザ上で動くかんたんペットゲームを作るためのツールです。用意した画像・音声ファイルを読み込み、HTMLファイルとして書き出すだけで、自分だけのペットゲームが完成します。外部サービスは不要で、すべてブラウザ内で完結します。
操作: マウス・ペンタブレット・タッチに対応しています(書き出したゲームはスマホ・タブレットでもつつく/撫でる/プレゼントの操作ができます)。
1. フォルダを用意してクリックで選択する
フォルダ構成に従って画像・音声を用意し、全般タブ左側のエリアをクリックしてフォルダを選択します。画像がなくてもオレンジ色のキャラクター(blob)で動作します。
2. プレビューを確認する
読み込んだ素材は即座にプレビューに反映されます。時刻ボタン(朝・夕・夜・自動)で背景の時間帯を切り替えられます。
3. HTMLを書き出す
「HTML書き出し」ボタンを押すとゲームHTMLが生成されます。そのまま公開できます。
Cmd+S: 手動で保存することもできます(保存できなかった場合はメッセージが出ます)。
バックアップ: 大切な作品は「JSON書き出し」でファイルに保存しておくと安心です。
フォルダ名・ファイル名は固定です。大文字・小文字は区別しません。
logo.png ← タイトルロゴ画像(任意・縦54px以内推奨)
stop.gif ← GIF版(任意・あればPNG連番より優先)
stop.mp3
walk1.png 〜 walk8.png
walk.gif ← GIF版(任意)
walk.mp3
run1.png 〜 run6.png
run.gif ← GIF版(任意)
run.mp3
click.gif ← GIF版(任意)
clickafter1.png 〜 clickafter3.png ← クリック後リアクション
clickafter.gif ← GIF版(任意)
click.mp3
drag1.png 〜 drag3.png ← ドラッグ中
drag.gif ← GIF版(任意)
dragafter1.png 〜 dragafter8.png ← ドラッグ後リアクション(最大8枚)
dragafter.gif ← GIF版(任意)
drag.mp3
present1.png 〜 present3.png ← 食べているモーション
present.gif ← GIF版(任意)
present.mp3
afterpresent1.png ← 喜んでいるモーション(1枚)
afterpresent.gif ← GIF版(任意)
afterpresent.mp3
bgm.mp3 ← BGM(任意・ループ再生)
| ステート | ファイル名 | 最大枚数 | 備考 |
|---|---|---|---|
| 止まり | stop1〜3.png | 3枚 | stop3がまばたき用 |
| 歩き | walk1〜8.png | 8枚 | |
| 走り | run1〜6.png | 6枚 | |
| クリック驚き | click1〜3.png | 3枚 | |
| クリック後 | clickafter1〜3.png | 3枚 | |
| ドラッグ中 | drag1〜3.png | 3枚 | |
| ドラッグ後 | dragafter1〜8.png | 8枚 | |
| 食べる | present1〜3.png | 3枚 | |
| 喜ぶ | afterpresent1.png | 1枚 |
用意した枚数だけでループします。1枚でも動作します。足りない枚数は自動的に繰り返して使われるため、画像の間に空白は入りません。
各ステートにGIFアニメを追加することができます。GIFはPNG連番と併用可能です。同じステートにGIFとPNG連番の両方がある場合、GIFが優先して表示されます。
GIFだけで全ステートをまかなうことも、PNG連番をベースにしつつ一部だけGIFにすることもできます。
| ステート | GIFファイル名 | 備考 |
|---|---|---|
| 止まり | stop.gif | ループGIF推奨 |
| 歩き | walk.gif | ループGIF推奨 |
| 走り | run.gif | ループGIF推奨 |
| クリック驚き | click.gif | |
| クリック後 | clickafter.gif | |
| ドラッグ中 | drag.gif | ループGIF推奨 |
| ドラッグ後 | dragafter.gif | |
| 食べる | present.gif | |
| 喜ぶ | afterpresent.gif |
音声はMP3形式を推奨します。歩き・走り・BGM はループ再生、それ以外は各ステートの開始時に再生されます。
| ファイル名 | 配置フォルダ | 再生タイミング |
|---|---|---|
stop.mp3 | default/ | まばたきのとき |
walk.mp3 | default/ | 歩いている間(ループ) |
run.mp3 | default/ | 走っている間(ループ) |
click.mp3 | reaction/ | クリックされたとき |
clickafter.mp3 | reaction/ | クリック後リアクションのとき |
drag.mp3 | reaction/ | ドラッグされたとき |
dragafter.mp3 | reaction/ | ドラッグ後リアクションのとき |
present.mp3 | present/ | プレゼントを食べているとき |
afterpresent.mp3 | present/ | プレゼントをもらって喜んでいるとき |
bgm.mp3 | background/ | 常時(ループ再生) |
キャラクターは以下の状態(ステート)を持ちます。それぞれに対応するアニメーションファイルを用意します。
| ステート名 | 内容 | 音声 |
|---|---|---|
| IDLE(止まり) | デフォルト状態。まばたきあり。一定時間後に歩きや走りに遷移 | stop.mp3 |
| WALK(歩き) | 左右にゆっくり歩く | walk.mp3 |
| RUN(走り) | 左右に速く走る | run.mp3 |
| CL_SHOCK(クリック驚き) | クリックされた直後の驚きモーション | click.mp3 |
| CL_REACT(クリック後) | 驚きの後のリアクション | — |
| DR_PET(ドラッグ中) | ドラッグされているとき。体が傾く | drag.mp3 |
| DR_REACT(ドラッグ後) | 放された後のリアクション | — |
| PR_EAT(食べる) | プレゼントを食べているモーション | present.mp3 |
| PR_HAPPY(喜ぶ) | プレゼントをもらった後の喜びモーション | afterpresent.mp3 |
動きを減らす設定: OS の「視差効果(動き)を減らす」がオンのときは、キャラクターは自動で歩き回らず止まったまま待機します(つつく・撫でるなどの操作には反応します)。
画像はすべて右向きで描いてください。左向きの動きは自動ミラーリング(水平反転)で対応します。
「HTML書き出し」ボタンを押すと、すべての素材を埋め込んだ単一のHTMLファイルが生成されます。生成されたHTMLはそのままブラウザで開くか、Webサーバーにアップロードして公開できます。外部依存なし・単一ファイル完結です。
右上のアイコンからJSONファイルの書き出し・読み込みができます。画像・音声データを含む作業データ全体を保存します。別のPCやブラウザで作業を続けたいときや、バックアップを取りたいときに使います。
以下は現時点では未実装ですが、将来的に対応予定の機能です。
| 機能 | 内容 |
|---|---|
| 左右別画像対応 | 現在は自動ミラーリング。左向き専用画像を別途設定できるようにする |
| リアクション種類の追加 | クリック・ドラッグ以外のインタラクションを増やす |
| プレゼント種類の追加 | 複数種類のプレゼントを切り替えられるようにする |
| 寝る・座るモーション | 長時間放置後などの特殊状態を追加する |
| 時間帯別特殊アイドル | 夜は眠そうにするなど、時間帯に連動した動きを追加する |
| 書き出しHTMLのスリム化 | モード別に不要なコードを含まない軽量な書き出しに対応する |