Balloon.js

Ukagaka Balloon Surface Renderer for Web Browser

About

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

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/Balloon.js"></script>
<script>
NarLoader
.loadFromURL("../nar/origin.nar")
.then(function(nanikaDir){
  console.log(nanikaDir.files);
  var balloonDir = nanikaDir.asArrayBuffer();
  var balloon = new Balloon.Balloon(balloonDir);
  return balloon.load();
}).then(function(balloon){
  console.log(balloon);
  var div = document.createElement("div");
  var scopeId = 0;
  var surfaceId = 0;
  balloon.attachBlimp(div, scopeId, surfaceId);
  document.body.appendChild(div);
}).catch(function(err){
  console.error(err);
});

ChangeLog

• release log

Development

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

Document

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

Balloon Class

load(directory: { [path: string]: ArrayBuffer; }): Promise

unload(): void

descript: { [key: string]: string; }

attatchSurface(element: HTMLDivElement, scoepId: number, blimpId: number|string): BalloonSurface|null

• blimpId: バルーンサーフェスID
  • 0の時、左側通常バルーン
  • 1の時、右側通常バルーン
  • 2の時、右側大きなバルーン
  • 3の時、左側大きなバルーン

detachSurface(element: HTMLDivElement): void

on(event: string, callback: (event: BalloonEvent)=> void): void

• on(event: "mouse", callback: (ev: BalloonMouseEvent)=>void): void
• on(event: "select", callback: (ev: BalloonSelectEvent)=>void): void

interface BalloonEvent {
  type: string;
  scopeId: number; // \p[n]
  balloonId: number; // \b[n]
}

interface BalloonMouseEvent extends BalloonEvent {
  type: string; // click|dblclikck|mousemove|mouseup|mousedown
}

interface BalloonSelectEvent extends BalloonEvent {
  type: string; // anchorselect|choiceselect
  id: string;
  text: string;
  args: string[]
}

BalloonSurface Class

element: HTMLDivElement

• attatchSurfaceで指定したDiv要素です。
• 以下のように要素が追加されます

  div.blimp
    canvas.blimpCanvas
    div.blimpText
    style[scoepd]

isBalloonLeft: boolean

• 吹き出しがゴーストに向かって左にあるならtrue

width: number

• バルーンの横幅px

height: number

• バルーンの縦幅px

render(): void

• バルーンを再描画します

surface(balloonId: number): void

• \b[n]
• このメソッドを使ってもバルーンの左右位置は変えられません。
• Blimp#left(), Blimp#rihgt()を使ってください。

left(): void

• バルーンを左向き表示にします

right(): void

• バルーンを右向き表示にします

anchorBegin(id: string, ...args: string[]): void

• \_a[anchorId], \_a[anchorId,...]

anchorEnd(): void

• \_a

choice(text: string, id: string, ...args: string[]): void

• \q[label, choiceId] \q[label, choiceId, ...]

choiceBegin(id: string, ...args: string)[]: void

• \__q[choiceId] \__q[choiceId,...]

choiceEnd(): void

• \__q

talk(test: string): void

• バルーンの現在のカーソル位置に文字を追加します

marker(): void

• \![*]

clear(): void

• \c

br(ratio: number): void

• \n, \n[half], \n[ratio]

showWait(): void

• \x

font(name: string, ...values: string[]): void

• \f[]

location( x: string, y?: string ): void

• \_l[x,y]