#fthon

EaselJSで単純なインタラクティブコンテンツを作ってみよう

ゼノブレイドクロスが発売されて睡眠時間が削られてる福岡です。社内ハッカソン「F-thon」の一環として、インタラクティブコンテンツ制作講習会を行いました（前回、デザインの回の様子はこちら）。あまりプログラムに慣れていない人もいたのでまずインタラクティブとはなんぞやの説明から、身近なインタラクティブなものの説明、そしてWeb技術でインタラクティブなものを制作するためのライブラリをざっと説明したあと、CreateJS(EaselJS)で実際に簡単なコンテンツを作ってもらいました。Processingのような選択肢もありますが、Web制作の人間としてはブラウザで動いた方が嬉しいだろうということでEaselJSを選択しました。

講習に用いたファイルはGithubで公開しています。

消しては書き、消しては書き

講習にあたり簡単なEaselJSの書き方テンプレートを用意しました。

var _canvas; var _stage; function init() { _canvas = document.getElementById("testCanvas"); // Stage生成 _stage = new createjs.Stage(_canvas); // Stage上でのマウスイベントを設定 _stage.enableMouseOver(); _stage.addEventListener("stagemousedown", handleMouseDown); _stage.addEventListener("stagemouseup", handleMouseUp); _stage.addEventListener("stagemousemove", handleMouseMove); createjs.Ticker.timingMode = createjs.Ticker.RAF; createjs.Ticker.addEventListener("tick", tick); } // この関数を繰り返し実行 function tick(event) { //これを実行しないと描画内容が更新されないゾ！😩 _stage.update(); } function handleMouseDown(event) { } function handleMouseUp(event) { } function handleMouseMove(event) { }

すべての土台となるStageの作成、そして各種マウスイベントとTickerを使ったループ処理が書かれています。

では最初に、EaselJSを使って丸を書きます（sample0.html）。ホワイトボードに書いた絵をあとから右に10cm動かすことはできないように、コンピューターの描画も基本的には「消しては書き」です。graphics.clear()で描画内容を消去、丸を描く、を繰り返しています。

var _circlePoint = new createjs.Point(100, 100); var _circleSize = 20; // この関数を繰り返し実行 function tick(event) { _shape.graphics.clear(); // beginFill(色) : 何色で塗りつぶす？ _shape.graphics.beginFill("#000000"); // drawCircle(x, y, 直径) : 円を描画 _shape.graphics.drawCircle(_circlePoint.x, _circlePoint.y, _circleSize); //これを実行しないと描画内容が更新されないゾ！😩 _stage.update(); }

系のルールを作る

このままでは “インタラクティブ” とは口が裂けても言えないので、マウスに追従させてみましょう（sample1.html）。丸の現在座標とマウスの座標の差（の何割か）を足し続ける「アキレスと亀方式」です。これでマウスに遅れて丸が付いて行きます。0.1のところをいろいろいじってみても楽しいですね。ゴム紐が付いたような動きにするにはどうすればいいか、とか。

_circlePoint.x = _circlePoint.x + (_mousePoint.x - _circlePoint.x)*0.1; _circlePoint.y = _circlePoint.y + (_mousePoint.y - _circlePoint.y)*0.1;

ではこの系に重力を導入しましょう。丸は重力に引かれてcanvasの底辺まで落ちていき、バウンドします。丸はこれでボールになりました。ついでに左右の辺でもボールがバウンドするようにします。sample2.htmlではマウスでボールが投げられるようにしています。

//バウンドY if(_circlePoint.y >= _stage.canvas.height - _circleSize){ _circleV.y = - _circleV.y * 0.8; //ぴくぴく対策 if(Math.abs(_circleV.y)<3){ _circleV.y = 0; } _circlePoint.y = _stage.canvas.height - _circleSize; }else{ _circleV.y = (_circleV.y+_circleA.y)*0.97; } _circlePoint.y += _circleV.y;

最後はボールを100個に増やしてみます（sample3.html）。たくさんのものを同時に動かすことに長けているのがコンピューター、そしてプログラミングです。マウスダウンでボールが集まって、マウスアップで爆発！単純ながら楽しいです。これだけ複雑に見える系もプログラミングにしてしまうと案外単純なものです。