メロンJS 2

新鮮でモダン、軽量なHTML5ゲームエンジン

melonJS 2は、メロンJSゲームエンジンの最新バージョンです。ES6クラス、継承、セマンティクスを使用してほぼ完全に再構築され、ロールアップを使用してバンドルされ、トランスパイルやツリーシェイキングなどの最新の機能を提供します。

注:既存のプロジェクトをmelonJS 2(バージョン10.0以降)に移行すると、ゲームが確実に壊れます(ES6セマンティクス、Jay継承、nodeJSイベントエミッター、非推奨のレガシーAPIとの下位互換性はありません)、最初にmelonJS 2へのアップグレードに関するこの小さなステップバイステップガイドを読むことをお勧めします。melonJSのレガシーバージョン(9.x以前)を見ている場合は、レガシーブランチの下にあります。

melonJSはオープンソースであり、MITライセンスの下でライセンスされており、シンガポールのAltByteの愛好家の小さなチームの助けを借りて積極的に開発および保守されています。

メロンJSについて

melonJSはフル機能のゲームエンジンです:

互換性

• スタンドアロンライブラリ(HTML5対応のブラウザを除いて、他には依存しません)
• すべての主要なブラウザ(Chrome、Safari、Firefox、Opera、Edge)およびモバイルデバイスと互換性があります

グラフィックス

• 2Dスプライトベースのグラフィックエンジン
• デスクトップおよびモバイルデバイス向けの高速WebGL 1&2レンダラー(キャンバスレンダリングへのフォールバック付き)
• 高DPI解像度とキャンバスの高度な自動スケーリング
• 9スライスのスケーリングオプションとアニメーション管理を備えたスプライト
• 色合いやマスキングなどの組み込み効果
• 標準スプライトシート、単一および複数のパックテクスチャのサポート
• System & Bitmap Text

音

• Howler に基づく空間オーディオまたはステレオ パンニングによる Web オーディオのサポート
• レガシーブラウザ用のマルチチャンネルHTML5オーディオへのフォールバック

薬草

• 正確な検出と応答のためのポリゴン(SAT)ベースの衝突アルゴリズム
• 空間パーティショニングを用いた高速広相衝突検出
• 最適化された自動衝突検出のための衝突フィルタリング

インプット

• マウスとタッチデバイスのサポート(マウスエミュレーション付き)
• デバイスモーションと加速度計のサポート

レベル エディタ

• タイルマップフォーマットバージョン+1.0の統合により、レベルデザインが容易
  • 非圧縮プレーン、Base64、CSV、およびJSONエンコードされたXMLタイルマップの読み込み
  • 直交マップ、アイソメトリックマップ、六角形マップ(法線マップとスタッガードマップの両方)
  • 複数のレイヤー(複数の背景/前景、衝突、画像レイヤー)
  • アニメーションと複数のタイルセットのサポート
  • タイルセットの透明度設定
  • レイヤーのアルファと色合いの設定
  • 長方形、楕円、ポリゴン、ポリラインオブジェクトのサポート
  • タイル オブジェクト
  • 反転 & 回転タイル
  • ダイナミックレイヤーとオブジェクト/グループの順序付け
  • 動的エンティティの読み込み
  • 形状ベースのタイル衝突のサポート

財産

• 非同期アセットの読み込み
• 完全にカスタマイズ可能なプリローダー

そしてまた

• ステートマネージャー(ロード、メニュー、オプション、ゲーム内の状態を簡単に管理するため)
• トゥイーン効果、トランジション効果
• オブジェクトリサイクルのプールサポート
• 基本パーティクルシステム
• nodeJSイベントエミッタベースのイベントシステム

ツールの統合

melonJSとのツールの統合と使用法は、私たちのWikiに記載されています。

メロンJSを使用する

melonJSを初めて使用する場合は、ここから始めます

• melonJS:プラットフォーマーゲームのハッキング

ウィキの詳細と使用法にある概要をざっと見ると役立つかもしれません

独自のプロジェクトを開始するときは、es6ボイラープレートをチェックしてください

デモ

メロンJS機能のいくつかのデモ:

• プラットフォーマーデモ
• アイソメトリックデモ
• スプライトデモ
• マスキングデモ(警告:光過敏性てんかんの人の発作を引き起こす可能性があります)
• プリミティブ描画デモ
• UI デモ

その他の例はこちら

基本的なハローワールドの例

import * as me from "https://esm.run/melonjs";

me.device.onReady(function () {
    // initialize the display canvas once the device/browser is ready
    if (!me.video.init(1218, 562, {parent : "screen", scale : "auto"})) {
        alert("Your browser does not support HTML5 canvas.");
        return;
    }

    // add a gray background to the default Stage
    me.game.world.addChild(new me.ColorLayer("background", "#202020"));

    // add a font text display object
    me.game.world.addChild(new me.Text(609, 281, {
        font: "Arial",
        size: 160,
        fillStyle: "#FFFFFF",
        textBaseline : "middle",
        textAlign : "center",
        text : "Hello World !"
    }));
});

melonJS 2 (バージョン 10.x 以降) を使用したシンプルなハローワールド

ドキュメンテーション

• オンライン API

ドキュメントのオフラインバージョンを有効にするには、設定ページに移動して以下を有効にします。

offline storage

ダウンロード メロンJS

最新のビルドと対応するリリースノートは、こちらから直接ダウンロードできます。

melonJS 2はES6バンドルのみを提供するようになりました:

melonjs.module.js

melonjs.mjs

types/index.d.ts

注:アプリケーションをES5と互換性を持たせる必要がある場合は、ES5への自動トランスパイルを提供する定型文を参照してください。

または、メロンJSの最新バージョンはNPMからインストールすることもできます。

$ npm install melonjs

melonjsのES6モジュールをインポートする必要がある場合(Webpackなど):

$ import * as me from 'melonjs/dist/melonjs.module.js';

または、jsDeliveryコンテンツ配信ネットワーク(CDN)を使用してhtmlに追加することもできます。

<!-- load the ES6 module bundle of melonJS v10.0 -->
<script type="module" src="https://esm.run/melonjs@10.0"></script>
<!-- omit the version completely to get the latest one -->
<!-- you should NOT use this in production -->
<script type="module" src="https://esm.run/melonjs"></script>

注:10.0.0バージョン以降、デバッグプラグインはmelonJSライブラリリリースの一部として提供されなくなり、公式の定型文に移動されました

メロンJSの構築

ほとんどのユーザーにとって、おそらくあなたが望むのはmelonJSを使用することだけであり、必要なのは最新のビルドされたリリースをダウンロードして開始することだけです。melonJSを構築する必要があるのは、プロジェクトに貢献し、その開発を開始したい場合だけです。

独自のバージョンのmelonJSをビルドするには、以下をインストールする必要があります。

• ノード.js JavaScript ランタイムと NPM パッケージ マネージャー

Node.jsとNPMをインストールしたら、ビルドの依存関係をインストールする必要があります。 リポジトリをクローンしたフォルダで以下を実行します。

$ [sudo] npm install

次に、次のコマンドを実行して melonJS ソースをビルドします。

$ npm run build

生成されたファイルは、次のディレクトリで使用できます。

build

• melonjs.module.js

  : plain ES6 module

• melonjs.mjs

  : a ES6 chunk directory used for tree-shaking

If you need to create the corresponding typing you can use the follwing :

$ npm run types

This will generate all the file under the directory.

.d.ts

dist/types

To run the melonJS test suite simply use the following:

$ npm run test

This will run the jasmine spec tests with the output displayed on the shell. Do note that the latest Chrome version is required, as the test unit will run the Browser in a headless mode (in case of failed tests, upgrade your browser).

Last but not least, if you really want to contribute, but not sure how, you can always check our discussions list to get some idea on where to start.

Building the documentation

同様に、次のコマンドを実行して、ドキュメントの独自のコピーをローカルで構築できます。

$ npm run doc

生成されたドキュメントは、ディレクトリで利用可能になります

docs

仕掛品ビルド

最新の仕掛品ビルドは、マスターブランチのdistで利用できます。