Ikagaka.shell.js NPM

Shell.js

Ukagaka Shell Renderer for Web Browser

screenshot

About

Shell.js is a Ukagaka compatible Shell renderer for HTML canvas.

demo

Usage

<script src="../bower_components/encoding-japanese/encoding.js"></script>
<script src="../bower_components/jszip/dist/jszip.min.js"></script>
<script src="../bower_components/narloader/NarLoader.js"></script>
<script src="../dist/Shell.js"></script>
<script>
NarLoader
.loadFromURL("../nar/mobilemaster.nar")
.then(function(nanikaDir){
  var shellDir = nanikaDir.getDirectory("shell/master").asArrayBuffer();
  var shell = new Shell.Shell(shellDir);
  return shell.load();
}).then(function(shell){
  var div = document.createElement("div");
  var srf = shell.attachSurface(div, 0, 0);
  console.dir(srf);
  srf.on("mouseclick", function(ev){ console.log(ev); });
  document.body.appendChild(div);
}).catch(function(err){
  console.error(err, err.stack);
});
</script>

ChangeLog

release log

Development

npm install -g bower dtsm gulp browserify watchify http-server
npm run init
npm run build

Document

型はTypeScriptで、サンプルコードはCoffeeScriptで書かれています。

Shell Class

Shell/***/ 以下のファイルを扱います。
surfaces.txtなどをパースして情報をまとめて保持します。
canvas要素にSurfaceクラスを割り当てるためのクラスです。

constructor(directory: { path: string: ArrayBuffer; }): Shell

コンストラクタです

load(): Promise

Shell/master/ 以下のファイル一覧とそのArrayBufferを持つObjectを渡してください。
ArrayBufferはnarファイルをzip解凍や、ネットワーク更新用のupdates2.dauをXHRして入手してください。
ディレクトリ区切りは UNIXと同じ/を使ってください。 windowsの\は対応していません。
このファイルパスと値のkey-value形式で渡す引数は、メモリを多く消費するため、将来的に変更される可能性があります。

shellDir =
  "descript.txt": new ArrayBuffer()
  "surface0.png": new ArrayBuffer()
  "elements/element0.png": new ArrayBuffer()
  "surfaces.txt": new ArrayBuffer()

shell = new Shell(shellDir)

unload(): void

Shellクラスが管理しているすべてのリソースを開放します。
すべてのサーフェスがdetachSurfaceされます。
すべてのイベントハンドラも解除されます。
すべてのプロパティにnullが代入され、GCを促します

descript: { key: string: string; }

descript.txtの中身をkey-value形式で持っています。

shell.load().then (shell)->
  console.log(shell.descript)

attatchSurface(div: HTMLDivElement, scopeId: number, surfaceId: number|string): Surface|null

指定したdivの中にcanvas要素を追加しscopeIdのsurfaceIdのサーフェスの描画を行います。
- SakuraScriptでなら\0\s[0]に該当します。
surfaceIdはサーフェスエイリアスが考慮されます。
- 該当するサーフェスが存在しなかった場合、nullが返ります。

cnv = document.createElement("canvas")
srf = shell.attachSurface(cnv, 0, 0) # \0\s[0]
document.body.appendChild(cnv)
cnv2 = document.createElement("canvas")
srf2 = shell.attachSurface(cnv, 0, "びっくり") # \0\s[びっくり]
document.body.appendChild(cnv2)

detachSurface(div: HTMLDivElement): void

attachSurfaceしたdivを描画対象から外します。
サーフェスを変更する前に必ず呼び出してください

bind(category: string, parts: string): void

\![bind,カテゴリ名,パーツ名,1] 相当

bind(scopeId: number, bindgroupId: number): void

scopeId 番目のキャラクターのbindgroupIdの着せ替えを着せます。

unbind(category: string, parts: string): void

\![bind,カテゴリ名,パーツ名,0] 相当

unbind(scopeId: number, bindgroupId: number): void

scopeId 番目のキャラクターのbindgroupIdの着せ替えを脱がせます。

showRegion(): void

このシェルの当たり判定を表示します。

hideRegion(): void

このシェルの当たり判定を非表示にします。

on("mouse", callback: (event: SurfaceMouseEvent)=> void): void

マウスイベントのイベントリスナーです。
対応しているイベントは以下の通りです。
- mouse
  - タッチイベントとマウスイベントの区別は現状していません。
  - mousewheelまだ
透明領域のマウスイベントにも反応します。 ev.transparency で判定してください、。
- これはsurface canvasレイヤが重なった時のマウスイベントの透過処理のためのフラグです。
- 複数レイヤ間の重なりの上下順番を管理するNamedMgr.jsなどが使います。
ShellクラスはEventEmitterを継承しているのでoffやremoveAllListenerなどもあります

interface SurfaceMouseEvent {
  type: string; // mousedown|mousemove|mouseup|mouseclick|mousedblclick のどれか
  transparency: boolean; // 透明領域ならtrue
  button: number; // マウスのボタン。 https://developer.mozilla.org/ja/docs/Web/API/MouseEvent/button
  offsetX: number; // canvas左上からのx座標
  offsetY: number; // canvas左上からのy座標
  region: string; // collisionの名前,"Bust","Head","Face"など
  scopeId: number; // このサーフェスのスコープ番号
  wheel: number; // mousewheel実装したら使われるかも
  event: UIEvent // 生のDOMイベント。 https://developer.mozilla.org/ja/docs/Web/API/UIEvent
}