理系ジン

しばらくPythonに力を入れる予定です。

Pixi.jsについて

HTML5アプリ JavaScript

Pixi.jsの概要

Pixi.jsは、WebGLを使った2D描画ライブラリです。

次の特徴や機能があります。

  • ブラウザがWebGLに未対応の場合はCanvasで描画
  • ビットマップやWebフォントの文字表示をサポート
  • スプライトシート・画像・フォントなどのアセットローダー
  • ActionScriptに似たAPI
  • 画像の重ね合わせやぼかしなどのエフェクト
  • マルチタッチサポート
  • 2D描画で最速

2D描画ライブラリで最速である事は、CreateJSがWebGLを公式にサポート！爆速になったHTML5での描画パフォーマンスを検証してみた - ICS LABに書かれています。

Pixi.jsの使い方は、ソース付きの例が多数あるExamplesや次のチュートリアルが参考になります。また、API Docsをすぐに参照できるようにしておくと便利です。

チュートリアルのBuilding a Parallax Scroller with Pixi.jsでは、徐々にコードを修正・追記していくことで、主なクラスの使い方やJavaScriptのオブジェクト指向やスプライトシートなどを解説しています。

Building a Parallax Scroller with Pixi.js:Part2によると（Pixi.jsの実装やIE10 以下を切る場合の JavaScript チェックリスト - Qiitaの解説も同様）JavaScriptでの親クラスSupを継承した子クラスSubの実装はだいたい次のようになるようです。

function Sub(arg1, arg2) {
  // ...
  Sup.call(this, arg1);
  // ...
};

Sub.constructor = Sub;
Sub.prototype = Object.create(Sup.prototype);

Sub.prototype.otherFunc = function(argA)
{
  // ...
};
// ...

Pixi.jsについてはそのうち詳しく書きます。

Pixi.jsを組み込んでいるライブラリPhaser

Phaserは、描画にPixi.jsを利用していて、サウンドや衝突や落下の物理演算などの機能もあるライブラリです。

ゲーム向けJSライブラリ雑感によると、音源再生ライブラリとしてPhaser.Soundを利用するのが良さそうです。

いつか詳しく書きます。

参考資料

予定など

アプリについてはちょっと方針を変えて、最初は単純な実証的なものにして、後は理系ジン的なアプリを開発した時に紹介することにしようと思います。

また、アプリ用のWebサイト等をGitHub Pagesで作る目的で、静的サイトジェネレータのMetalsmithを調べたり、Webサイトを作る手始めに、はてなブログのテーマを作ってみようと思います。

進捗に応じてその辺の記事を書きます。

話は変わりますが、最近Windowsが使いにくい状況になってしまったので、半年程はWindowsをほぼ使わないと思います。