Skip to content

Releases: pentamania/phina.js

esm-alpha.4

27 Sep 10:04
@pentamania pentamania
esm-alpha.4
db07477
Compare
Choose a tag to compare
esm-alpha.4 Latest
Latest

インストール方法

npmレジストリからインストール（常に最新版）

npm i phina.js@npm:@pentamania/phina-es
もしくは
yarn add phina.js@npm:@pentamania/phina-es
※npmの場合はv6.9以降必須

github releasesからインストール（バージョン固定）

npm install https://github.com/pentamania/phina.js/releases/download/esm-alpha.4/phina.esm-alpha.4.tgz
もしくは
yarn add https://github.com/pentamania/phina.js/releases/download/esm-alpha.4/phina.esm-alpha.4.tgz

下のほうのリンクからもダウンロード可能

使い方についてはこちらを参照。

🔧主な変更点・機能追加

  • 🚀Elementクラスのflickable, physicalのgetterアクティベート機能の復帰
  • 📝型定義・ドキュメントの大幅改善
    • 特にTween, Tweenerクラス周り強化
      • Tweener関係の一部型については細分化で削除・リネームを行っています
    • DisplayeEementにdrawとclip定義&ドキュメントを（無理やり）追加
    • アクセスレベルの見直し
    • JS Docの@link修正
    • …その他細かい継ぎ足し
  • 💥ビルドプロセスでbabelトランスパイルを行うように（後述）
  • 💥Scene.exitの内部処理でargumentsオブジェクトを使わないよう改変（非strict-mode対策、後述）
  • 🧰バージョン表記を一時的に変更
  • 🧰ブラウザ用ESMバンドルの追加（後述）

ブラウザ用ESMバンドルについて

今バージョンより拡張子がmjsのビルドファイルが追加されてます。
直接ブラウザのmodules読み込みで利用する際、今後はこちらのファイルを使用します。

例えば以下のようなディレクトリ構成のときは、

- phina.js
  - build
    - phina.esm.mjs
  - (...その他のフォルダ)
- index.html

このような感じでモジュール読み込みします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <title>phina esm sample</title>
</head>
<body>
<script type="module">
// mjsファイルからインポート
import { phina, GameApp } from "./phina.js/build/phina.esm.mjs";

phina.main(()=> {
  const app = new GameApp();
  app.enableStats();
  app.run();
})
</script>
</body>
</html>

なおwebpackなどのバンドラーを利用している場合、読み込み方法は今までと変わりません。

babelトランスパイルについて

使用者向け

今回よりビルド時にIE11をターゲットとしてbabelトランスパイルを行うようになりました。
これによりIE11相当のサポートが必要なプロジェクトでも使いやすくなりました。

ただちょっとだけ注意点があります。

  • babelヘルパーモジュールが必要
    • これはnpm install/yarn add時に自動でインストールされるので通常意識する必要はありません
    • mjsバンドルでは組み込み済みのため、不要です
  • 現段階ではバンドル後のスクリプトがstrict-mode下でないと挙動が変わる可能性がある
    • webpackはデフォルトでuse strictを出力してくれるためまず問題ないですが、parcelでは出力されないため若干注意が必要です
    • 違いが出ないよう現在修正中…

ライブラリ開発者向け

ビルドの際に自動的にes2015+構文をES5相当に変換するようになったため、ご自身でphinaに機能追加する際、let/constやarrow function, static propertyなどが心置きなく使えるようになりました。

ただしbabelはいわゆるpolyfill処理は行わないことに注意が必要です。
例えばPromiseはIE11ではサポートされてませんが、特に補完などされずそのままになります。

Assets 3
Loading

esm-alpha.3

30 May 05:16
@pentamania pentamania
esm-alpha.3
ffe2b7d
Compare
Choose a tag to compare
esm-alpha.3

インストール方法

npmレジストリからインストール（常に最新版）

npm i phina.js@npm:@pentamania/phina-es
もしくは yarn add phina.js@npm:@pentamania/phina-es
※npmは v6.9以降

github releasesからインストール（バージョン固定）

npm install https://github.com/pentamania/phina.js/releases/download/esm-alpha.3/phina.esm-alpha.3.tgz
もしくは yarn add https://github.com/pentamania/phina.js/releases/download/esm-alpha.3/phina.esm-alpha.3.tgz

使い方についてはこちらを参照してください。

🔧主な修正点・機能追加

  • 📝型定義・ドキュメントの大幅改修
  • 📝GamePad, Soundクラスをexport対象に追加
  • 📝型合わせのため、仮想関数・return値を一部追加（ 9340fc6, beddcca 等）
  • 🐛Randomクラスのstaticメソッドrandomを使おうとするとエラーで止まるバグを修正
  • 🐛phina.VERSIONがおかしくなってたのを修正
  • 🚀ビルトインオブジェクトの拡張メソッドモジュールを追加（後述）

ビルトインオブジェクト拡張メソッドモジュールについて（仮）

phina.jsの独自拡張メソッドは対応するモジュールを介して使うことができるようになりました。
モジュールはXxxEx（例：ObjectEx）、あるいXxxStatic（例：ArrayExStatic）という形でimportします。

使う際はcallを経由する必要があります。
ただしMathEx、XxxStatic系のモジュールについては不要です。

import { ObjectEx, MathEx } from 'phina.js';

// call必要
ObjectEx.forIn.call({ name: "phina" }, (k, v) => {
  console.log(k, v);　// -> "name phina"
});

// staticメソッドなのでそのまま利用可能
MathEx.clamp(10, 0, 8); // -> 8

従来の拡張と比べて可読性等は落ちますが、こちらはTypeScript型支援を受けられるというメリットがあります。
（従来拡張も使いやすくできないか考え中…）

Assets 3
Loading

esm-alpha.2

15 Jan 10:32
@pentamania pentamania
esm-alpha.2
3157297
Compare
Choose a tag to compare
esm-alpha.2

インストール方法

npm install https://github.com/pentamania/phina.js/releases/download/esm-alpha.2/phina.esm-alpha.2.tgz
もしくは
yarn add https://github.com/pentamania/phina.js/releases/download/esm-alpha.2/phina.esm-alpha.2.tgz

使い方についてはこちらを参照してください。

主な修正点・機能追加

  • alpha.1に残っていた数々のバグ🐛を粛清
    • Event.stopが動作していなかったバグ
    • LabelAreaが正しく表示更新されないバグ
    • その他、必要なモジュールをimportしていなかったことによるエラーバグ等を修正
  • 元々ライブラリに残っていたバグもついでに修正
    • バグではないが、不要と思われる引数やvarキーワード等も修正
  • TypeScript型定義の出力に対応（後述）
    • 出力がなるべく正確になるよう、JSDocコメントを大幅追加・修正
    • また動作に極力影響の無い形でのプロパティ宣言や型アサーションコメントを追加
    • 出力エラーを避けるため、一部ビット演算で使われているbooleanをnumber型(1 or 0)に変換（ライブラリ動作自体に変わりなし）
    • その他、エラー回避のための細かな変更
  • app/Element.toJSONを一時的に削除（ES class版では対応が難しいため）
  • phinaコアオブジェクトをシンプルなシングルトンオブジェクトに変換
  • ビルトインオブジェクトの任意拡張機能の追加（後述）

TypeScript型定義（d.ts）ファイルについて

今回のバンドルから型定義ファイル（typesフォルダ）が追加され、VSCodeなどの対応エディタで設定をしていればインテリセンス、型チェックなどの支援が受けられます。

phina-esm-d ts-sample

TSプロジェクトはもちろん、javascriptオンリーのプロジェクトでも以下のようなtsconfig.json（もしくはjsconfig.json）ファイルを用意することで同様の効果が得られます。

{
  "compilerOptions": {
    // JSファイルもチェックするよう設定
    "checkJs": true

    /* …その他オプション */
  },

  /* 以下は任意 */
  "exclude": [
    "node_modules"
  ]
}

ビルトインオブジェクトの拡張

Object.forInといったphina.js独自の拡張を行います。

import { extendBuiltInObject } from 'path/to/phina.esm.js'

// 従来のphina.jsのように一斉拡張
extendBuiltInObject();

// 特定オブジェクトの一部メソッドだけ拡張することも可能
extendBuiltInObject("Number", ["clamp", "upto"]);

ただしes2015（es6）あたりに実装されたメソッドのポリフィル（Array.find等）は対象から外しています（すでに実装が浸透している、他ライブラリとの連携の際、エラーになることがあるため）。
メソッド名（extendBuiltInObject）は仮のものなので今後変更の可能性があります。（何か良いネーミングがあったらこっそり教えてください🙏）

srcから直接インポート

拡張関数を必要に応じてsrcから直接importする方法もあります。
ただしこちらはcallメソッドを経由して使う必要があります。

import { forIn } from 'path/to/phina.js/src/core/object';
forIn.call({ name: "phina" }, (k, v) => {
  console.log(k, v);
});

（ただ、いずれにせよtypescriptに怒られる書き方なので今後どうにかする予定です）

（ライブラリ開発者向け）ビルド方法

ライブラリを自身で改良してビルドすることも可能です。
ビルドにはyarnが必要となります。（ビルド自体はnpmでも可能ですが、yarn.lockしかないので厳格なバージョンのモジュールを使ってのビルドはyarnのみサポートされます。）

  1. esmサポートブランチをgit cloneするなどしてローカルにリポジトリをDLします。
  2. yarn install で依存モジュールをインストール
  3. yarn buildでビルド（＆型定義の出力）

またyarn devコマンドでいわゆるwatch状態にすることもできます。開発中はこちらの利用を推奨。

その他

従来版のバンドルはまだですが、ある程度何とかなりそうな予感がしています。

かなりバグは潰したつもりですが、まだ動作がおかしな点・型定義がおかしなところがありましたら本forkリポジトリのissueやtwitterなどでお知らせいただけると助かります。🥳

Assets 3
Loading

esm-alpha.1

10 Nov 07:34
@pentamania pentamania
esm-alpha.1
f2646c4
Compare
Choose a tag to compare
esm-alpha.1 Pre-release
Pre-release

phina.jsの非公式・試験的ES Modules対応版です。

覚書

  • クラスは純粋なES2015 classになるのでインスタンス化にnew演算子が必須などの違いがあります。
    • その代わりclass extendができます。
  • 従来バンドル（=UMDバンドル）のサポートは検証中です。
    • 基本的にwebpack,、parcelなどのバンドラーを使う前提です。
  • 他ライブラリとの連携を考え、Object.forInといった独自のプロトタイプ拡張は行いません。（任意を行えるよう準備中...）
  • box2d, canvasrecorderはサポートしてません。
  • 一部Rest Parametersを使っている等の理由でIEなどのレガシーブラウザでは動作しません。
  • （2020年12月16日追記） 本バンドルは結構バグがあり、Collisionクラス、Randomクラス、一部Shape系クラスのメソッドを使おうとすると止まることが確認されてます…。次バージョンで修正するのでこちらの使用は飽くまでお試し程度に留める程度でお願いします。

インストール

npm install https://github.com/pentamania/phina.js/releases/download/esm-alpha.1/phina.esm-alpha.1.tgz
もしくはyarn add https://github.com/pentamania/phina.js/releases/download/esm-alpha.1/phina.esm-alpha.1.tgz

下の方から直接tgzパッケージをダウンロード・展開して使うこともできます。

使い方

シンプル

モジュールインポートの際はbuildディレクトリにあるesm対応バンドルphina.esm.jsから読み込みます。
ただしwebpack/parcel/その他バンドラーを使っている場合、デフォルトで（node_modules/phina.jsの）esm版バンドルを見に行く設定になっているため、import { CanvasApp } from "phina.js"などとパスを省略して読み込むことが可能です。

import { phina, CanvasApp, DisplayScene, TriangleShape } from "path/to/phina.js/build/phina.esm.js"
// import { [上と同じモジュール] } from "phina.js" // webpackやparcelなどでモジュール解決してる場合

/* scene定義 */
class MainScene extends DisplayScene {
  constructor(options) {
    super(options);
    this.player = new TriangleShape()
      .addChildTo(this)
      .setPosition(this.width/2, this.height/2)
  }

  update(app) {
    if (app.pointer.getPointingStart()) {
      this.player.setPosition(app.pointer.x, app.pointer.y)
    }
  }
}

/* main */
phina.main(()=> {
  const app = new CanvasApp();
  app.replaceScene(MainScene)
})

GameAppを使った方法

import { phina, GameApp, Sprite, DisplayScene } from "path/to/phina.js/build/phina.esm.js"; 

// グローバルにMainSceneを生やしておくとGameAppインスタンス化の際に認識されます
window.MainScene = class extends DisplayScene {
  constructor(options) {
    super(options);

    this.player = new Sprite('playerImg')
      .addChildTo(this)
      .setPosition(this.width/2, this.height/2)
  }

  update(app) {
    var p = app.pointer;
    if (p.getPointingStart()) {
      this.player.setPosition(p.x, p.y)
    }
  }
}

phina.main(()=> {
  // App
  const app = new GameApp({
    backgroundColor: "limegreen",
    assets: {
      image: {
        playerImg: 'path/to/player.png',
      },
    },
    startLabel: "title", // デフォルトのTitleSceneからスタート
  });

  app.run();
})
Assets 3
Loading