完成イメージ: スマートフォンで動作する PixelGames のメニューと Blocks ゲーム。
始める前に
必要なのは Replit アカウントだけです。作成は無料です。 目標は、次の一連の流れを最後まで完了することです。- Agent で作る
- モバイルアプリとしてテストする
- 公開して共有する
1. Agent にアプリの作成を指示する
Replit を開いて新しいアプリを開始します。作りたいものを説明し、アプリの種類として Mobile app を 選択します。
Agent がモバイルプロジェクトとコンソールのシェル UI をセットアップしている様子。
2. プレビューで動作を確認する
Replit は、プレビューペイン内で PixelGames を iOS または Android としてシミュレートします。変更を確認する 最も速い方法です。1
シミュレーターが自動的に起動する
PixelGames の準備ができると、Replit が自動的にシミュレーションを起動します。セットアップは不要です。
2
ドロップダウンでプラットフォームを切り替える
プレビューペインのツールバー（レンチとリフレッシュのアイコンの隣）にある Simulate on…
ドロップダウンで、iOS、Android、Web を切り替えます。
Replit のプレビューペインにある Simulate on... ドロップダウン。
実際に動くか確認する
プレイヤーになったつもりで PixelGames を使ってみましょう。- MENU 画面で Blocks が選択でき、他の3つのゲームには「SOON」と表示されていることを確認します。
- Blocks を開き、D-pad と A/B ボタンでいくつかのピースを操作します。
- プレイ中に HUD のスコア、レベル、ライン数が更新されることを確認します。
PixelGames が動きました
1つのプロンプトから、Replit 内でプレビューできるプレイ可能なゲームができました。トラブルシューティング
プレビューペインが空白のままになる
プレビューペインが空白のままになる
最初のビルドには1〜2分かかるため、止まっていると判断する前に少し待ってください。それでも空白の場合は、
コンソールでエラーを確認し、Agent に共有してください。
変更がプレビューに反映されない
変更がプレビューに反映されない
コンソールで R を押して PixelGames を再読み込みし、それでも古いままの場合はプレビューペインの
ツールバーにあるリフレッシュアイコンを使ってください。
プレビューに赤いエラー画面が表示される
プレビューに赤いエラー画面が表示される
通常は JavaScript エラーまたはパッケージの不足を意味します。メッセージを読んでください。多くの場合、
該当するファイルと行が示されています。その内容を Agent に共有し、修正を依頼してください。
アプリが Web では動くが iOS や Android で動かない（またはその逆）
アプリが Web では動くが iOS や Android で動かない（またはその逆）
パッケージによってはプラットフォームごとに動作が異なります。Web で動くものがネイティブでは
サポートされていなかったり、別のセットアップが必要だったりします。利用する前に Agent に
「このパッケージはネイティブをサポートしていますか？」と尋ねてください。
ビルドに時間がかかる
ビルドに時間がかかる
最初のビルドはまだキャッシュがないため常に遅く、以降は速くなります。遅いままの場合は、プロジェクト内に
不要なパッケージがないか Agent に確認させてください。
Module not found エラー
Module not found エラー
パッケージがインストールされていないか、インストール済みでもキャッシュが古くなっていることを意味します。
Agent にインストールまたはキャッシュのクリアを依頼し、パッケージ名のスペルミスがないかも確認してください。
次のステップ
スマートフォンでテストする
PixelGames を実際のスマートフォンアプリとして体験しましょう。親指で操作するボタン、ハプティクス、
実際の画面サイズを確認できます。
ログインを追加する
プレイヤーがサインインして進行状況を保存できるようにします。
モバイルアプリで画像を保存する
プロフィール写真を App Storage に保存します。
プッシュ通知を送信する
新しいゲームがリリースされたことをプレイヤーに知らせます。
支払いを追加する
PixelGames のコンテンツに対してプレイヤーに課金します。