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
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
anchorEnd(): void
choice(text: string, id: string, ...args: string[]): void
choiceBegin(id: string, ...args: string)[]: void
choiceEnd(): void
talk(test: string): void
- バルーンの現在のカーソル位置に文字を追加します