melonJS

melonJSでglTF・GLBやOBJ・MTLの3Dモデルを読み込み、マテリアルやライト、アニメーション、影、インスタンスの扱い方を確認できます。

• glTF・GLBのシーンを読み込みたいとき
• OBJモデルとMTL素材を使いたいとき
• モデルの向きや大きさを調整したいとき

melonJSの3D・2.5Dゲーム向けに、カメラ、メッシュ、ライト、奥行き順、透明表現やフォグの設定と座標系の注意点を確認できます。

• 3Dカメラをステージに設定したいとき
• メッシュやビルボードを配置したいとき
• 奥行き順や透明表現を調整したいとき

melonJSで効果音やBGMを読み込み、再生・停止・音量調整するほか、位置に応じた音や音声合成、ミックス全体へのエフェクト設定を扱うスキルです。

• 効果音とBGMを読み込みたいとき
• ゲーム内の位置に応じて音を鳴らしたいとき
• 音声ファイルなしで短い音を作りたいとき

melonJSのカメラ追従や画面効果、座標変換、図形描画を実装する際の要点を確認できます。描画のクリッピングやCanvasへの焼き込み、ピクセルの読み出しも扱います。

• プレイヤーを追うカメラの範囲を設定したいとき
• ワールド座標と画面座標を変換したいとき
• 独自描画に図形やグラデーションを使いたいとき

melonJSゲームのWeb向けビルドやネイティブアプリ化、ミニゲーム配信に向けた準備を進め、ブラウザー対応や容量の注意点も確認できます。

• 配布用のゲームプロジェクトを作りたいとき
• iOSやAndroid向けにアプリ化したいとき
• 古いブラウザーへの対応を検討したいとき

melonJSでビネットやぼかしなどの画面効果を適用し、GLSLとWGSLのカスタムシェーダーや色調補正を扱う方法を案内します。GPUとCanvasでの違いも確認できます。

• スプライトに発光やぼかしを加えたいとき
• 画面全体の色味を調整したいとき
• 独自のシェーダー効果を作りたいとき

melonJSのイベント購読と解除、フレームや状態変更のイベント名、Renderableのライフサイクルを整理し、重複登録や解除漏れを防ぎます。

• ゲーム更新イベントに反応したいとき
• 読み込み完了を検知したいとき
• 再利用オブジェクトの購読を解除

melonJS 20.xでゲームを起動し、初期化や描画先の選択、画面へのオブジェクト追加、シーン切り替えまでの基本を押さえられます。

• 新しいmelonJSゲームを起動したいとき
• 真っ白な画面や初期化エラーを調べたいとき
• 描画方式の違いを確認したいとき

melonJSでキーボード、マウス、タッチ、ゲームパッドの入力を扱う方法を説明します。操作を共通化するアクション設定や、クリック判定、座標の選び方も確認できます。

• キーとゲームパッドの操作を共通化したいとき
• タッチやポインター操作を追加したいとき
• 重なったオブジェクトの入力先を制御したいとき

melonJSで2Dの明かりや暗闇を表現し、Light2dや環境光、法線マップによる陰影を設定する方法と、描画環境ごとの制約を確認できます。

• 2Dシーンにたいまつの光を追加
• ステージ全体に暗闇を設定したいとき
• 法線マップで陰影を付けたいとき

melonJSのベクトル・行列計算を扱い、値が変更されるメソッドや補間、プールの使い方、3D成分が意図せず変わる引数の落とし穴を確認できます。

• ベクトル演算で元の値が変わる理由を調べたいとき
• 3D座標の成分が変化しない原因を探したいとき
• ゲームループ内の不要な生成を減らしたいとき

melonJSで爆発や煙などのパーティクル、動きに沿う軌跡を作る方法を扱い、放出設定や2D・3DのTrailの使い分けも確認できます。

• 爆発や煙の演出を作りたいとき
• 排気や移動跡を描きたいとき
• パーティクルの色や広がりを調整したいとき

melonJSゲームの処理落ちやメモリ負荷を調べ、オブジェクトプール、描画のまとめ方、画面外更新などを見直して性能を改善します。

• フレームレート低下の原因を調べたいとき
• 弾やパーティクルを再利用したいとき
• 描画コールを減らしたいとき

melonJSの物理ワールドを選び、ボディや衝突判定、移動、衝突コールバック、空間検索を設定するスキルです。SATとPlanck・Matter各アダプターの違いも扱います。

• ゲームに合う物理方式を選びたいとき
• ボディ形状と衝突条件を設定したいとき
• 衝突時のイベント処理を作りたいとき

melonJSのプラグインや物理アダプターの導入方法を整理し、デバッグ表示やSpine、圧縮マップ対応、自作プラグインの登録と拡張を案内します。

• デバッグパネルを登録したいとき
• Spineや圧縮マップを導入したいとき
• 物理アダプターの選び方を確認したいとき

melonJSの画面やゲーム進行をStageとstateで組み立て、遷移・一時停止・更新処理・タイマー・Tweenを適切に扱う方法を確認できます。

• メニューとプレイ画面を切り替えたいとき
• 再入場時にシーンを組み直したいとき
• 一時停止に合わせてタイマーを扱いたいとき

melonJSで画像やテクスチャアトラスからスプライトを作り、フレームアニメーションを設定する方法を扱います。位置合わせ、色変更、反転、伸縮パネルも確認できます。

• 画像からスプライトを作りたいとき
• フレームアニメーションを設定したいとき
• アトラスから画像領域を読み込みたいとき

melonJSでHUDやメニュー、ボタン、ゲージ、画面内テキストを組み立てる方法を扱います。画面固定の配置、パネルの入力処理、BitmapTextの演出やフォント設定も確認できます。

• スクロール中も画面に固定されるHUDを作りたいとき
• メニューや会話パネルに入力処理を付けたいとき
• 体力やロード状況をゲージで表示したいとき

melonJSを使ったゲーム制作で、目的に合う専門ガイドを選ぶための入口です。初期化から描画、入力、物理演算、音声、2D・3D機能まで案内します。

• melonJSで作る内容に合うガイドを探したいとき
• 新しいゲームの初期化手順を知りたいとき
• 3Dやモデル読み込みの参照先を探したいとき

Tiledで作ったマップをmelonJSに読み込み、オブジェクトからのエンティティ生成、当たり判定、カメラ範囲や等角投影マップの表示を設定するスキルです。

• Tiledのマップをゲームに読み込みたいとき
• マップ上のオブジェクトから敵を生成したいとき
• Tiledで当たり判定の形を編集したいとき

melonJSで画像、音声、マップ、フォントなどのゲーム素材を読み込み、ロード画面や進捗、取得、解放、外部URLや認証付き素材の設定を管理するスキルです。

• ゲーム素材のプリロード一覧を作りたいとき
• 読み込み進捗を画面に表示したいとき
• 外部サーバーの素材を読み込みたいとき

melonJSがWebGPU・WebGL 2・Canvasのどの描画方式で動いているかを把握し、機能差やフォールバック時の挙動に応じてゲームを調整する方法を確認できます。

• 端末によって描画結果が違う原因を調べたいとき
• Canvasで使える機能と制限を確認したいとき
• 描画機能の有無に応じた処理を実装したいとき

melonJSの画面がぼやける、ちらつく、切れるといった表示の問題を、拡大率や描画設定の役割を見分けて調整するスキルです。

• ドット絵のぼやけやちらつきを直したいとき
• キャンバスの切れやはみ出しを調べたいとき
• 画面の拡大方式を選びたいとき

melonJSのRenderable描画、入力イベント、描画順、ポストエフェクトの扱いを学び、位置ずれやクリックが届かないなどの見落としやすい不具合を防ぎます。

• 独自Renderableを描画したいとき
• クリック入力が届かない原因を探す
• スプライトの重なり順を調整