melonJS - 新鮮で軽量なJavaScriptゲームエンジン

(a fresh & lightweight javascript game engine)

Created at: 2011-04-11 15:03:14
Language: JavaScript
License: MIT

メロンJS 2

メロンJS ロゴ

ビルドステータス 言語グレード:ジャバスクリプト ビルドサイズ NPMパッケージ jsDeliver ボスバウンティバッジ

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

メロンJS

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を初めて使用する場合は、ここから始めます

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

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

デモ

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

その他の例はこちら


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

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 以降) を使用したシンプルなハローワールド

ドキュメンテーション

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

offline storage
186643536-854af31e-9c94-412e-a764-4bb7f93f15c3

ダウンロード メロンJS

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

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

建てる 形容
melonjs.module.js
ES6モジュール(ESM)バンドル
melonjs.mjs
ツリーシェイク可能なES6モジュールディレクトリ
types/index.d.ts
ES6モジュール(ESM)バンドルのタイプスクリプト宣言ファイル

注:アプリケーションを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で利用できます。

質問、助けが必要ですか?

テクニカルサポートが必要な場合は、次のチャネルからお問い合わせください。

  • フォーラム:melonJS 2では、新しい談話フォーラムに移動しましたが、以前のフォーラムここで見つけることができます
  • チャット:不和で私たちとチャットしたり、ギッターに来てください
  • 私たちは、便利なリンク、チュートリアル、および関連するmelonJSでウィキページを最新の状態に保つように努めました。

スポンサー

melonJSの開発をスポンサーとして支援する。あなたのサイトへのリンクを含む私たちのREADMEであなたのロゴを取得するか、バッカーになってバッカーリストにあなたの名前を取得します。どんなレベルのサポートも本当に高く評価され、大いに役立ちます!

メロンゲーム

アルトバイトPte Ltd