Downloaded 47 times
![ゲームクラス利用
window.addEventListener('DOMContentLoaded', function(e){
var system = new arc.System(320, 416, 'canvas');
system.setGameClass(GameMain, {hp:100, mp:100});
system.addEventListener(arc.Event.PROGRESS, function(e){
console.log(e.loaded + ", " + e.total);
});
system.addEventListener(arc.Event.COMPLETE, function(){
console.log('loaded');
});
system.load(['a.png', 'b.png']);
}, false);](https://image.slidesharecdn.com/presentation-120326111555-phpapp01/85/Arctic-js-30-320.jpg)
![JSONMovieClip
• JSON
{
" "fps":24,
" "frame":40,
" "main":3,
" "lib":[
" " {"id":1, "type":"data", "data":"sample.png", "pos":[0,0,34,34]},
" " {"id":2, "type":"mc", "loop":"true", "timelines":[
" " " {"target":1, "align":"CENTER", "keyframes":{
" " " " "1" : {"x":17, "y":17, "transition":"SINE_IN"},
" " " " "10": {"y":117, "transition":"SINE_OUT"},
" " " " "19": {"y":17}
" " " }}
" " ]},
" " {"id":3, "type":"mc", "loop":"true", "timelines":[
" " " {"target":2, "align":"LEFT", "keyframes":{
" " " " "1" : {"x":-34, "transition":"LINEAR"},
" " " " "40": {"x":320}
" " " }}
" " ]}
" ]
}](https://image.slidesharecdn.com/presentation-120326111555-phpapp01/85/Arctic-js-49-320.jpg)
![ImageManager
• 画像の読み込みを管理する
• 複数の画像を読み込みたい時に利用
var imageManager = new arc.ImageManager();
imageManager.addEventListener(arc.Event.COMPLETE, function(){
console.log(‘loaded images’);
});
imageManager.load([‘a.png’, ‘b.png’]);](https://image.slidesharecdn.com/presentation-120326111555-phpapp01/85/Arctic-js-63-320.jpg)
Arctic.js
- 2. About me • 近澤良(chikathreesix)@ DeNA • フロントエンドエンジニア • JavaScript, Flash, HTML/CSS, Objective-C等 • 蒙古タンメン中本
- 3.
- 4.
- 5. Arctic.jsとは • スマートフォンの • ブラウザで動く •ゲームを開発する為の • フレームワーク
- 6.
- 7. available on GitHub with MIT License
- 8. About Arctic.js • HTML5のCanvas要素を利用 •環境差異を吸収 • AS3との互換性
- 9.
- 10. HTML5 • DOM •style.left、style.topをいじる方法 • CSS3 • CSSでアニメーションを記述 • Canvas • Canvasに描画しまくる
- 11.
- 12.
- 13. Canvas • 自由度高い • APIがローレベル •CSS3よりはパフォーマンス悪い
- 14. Canvasを利用 • スマートフォン向けにハイパフォーマン スかつ複雑なものを実装するには Canvasを用いるのが良い
- 15.
- 16.
- 17. OSによる差異 • iPhone
- 18. OSによる差異 • Android2.1
- 19. Android2.1 • Canvasに重大なバグあり • 座標やサイズがscreen.width/320倍され る • 変換マトリックス系がおかしい
- 20.
- 21. フレームベース • setInterval/setTimeout内でプロパ ティを目標値に向かって足していく •環境によってアニメーションの速度が 変わってしまう
- 22. タイムベース • setInterval /setTimeout内で経過時 間を取得して、適切な値を設定する • 描画が間引かれる • 体感的な速度はどの環境でも保たれる • Arctic.jsではこちらを採用
- 23.
- 24. OOP • 全ての機能はオブジェクトを生成して 使う •クラスベースの開発スタイル
- 25. Class作成 var Person =arc.Class.create({ _name:null, initialize: function(name) { this.setName(name); }, setName: function(name){ this._name = name; }, getName: function() { return this._name; } });
- 26. Class継承 var Friend =arc.Class.create(Person, { _nickname:null, initialize:function(name) { this.setName(name); }, setName: function($super, name, nickname){ $super(name); this._nickname = nickname; }, getNickName:function(){ return this._nickname; } });
- 27.
- 28. HTMLを用意 <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <metaname="viewport" content="width=device-width, initial- scale=1, maximum-scale=1, user-scalable=no;"/> <title>Game</title> <body> <canvas id="canvas"></canvas> <script type="text/javascript" src="js/arctic.js"></script> <script type="text/javascript" src="js/game.js"></script> </body> </html>
- 29. ゲームクラス作成 var GameMain =arc.Class.create(arc.Game, { //Gameパラメーターをセットする処理等の初期化処理 initialize:function(params){ console.log(params.hp); }, //ランループから毎フレーム実行される update:function(){ } });
- 30. ゲームクラス利用 window.addEventListener('DOMContentLoaded', function(e){ var system= new arc.System(320, 416, 'canvas'); system.setGameClass(GameMain, {hp:100, mp:100}); system.addEventListener(arc.Event.PROGRESS, function(e){ console.log(e.loaded + ", " + e.total); }); system.addEventListener(arc.Event.COMPLETE, function(){ console.log('loaded'); }); system.load(['a.png', 'b.png']); }, false);
- 31.
- 32.
- 33. EventDispatcher • ほぼ全てのクラスがこれを継承してい る •addEventListenerを用いて非同期処理 • dispatchEventを用いてカスタムイベント 発火
- 34. EventDispatcher • 例 var disp = new arc.display.DisplayObject(); disp.addEventListener('HOGE', function(e){ console.log('hogehoge'); }); disp.dispatchEvent('HOGE'); disp.removeEventListener('HOGE'); disp.dispatchEvent('HOGE');
- 35.
- 36. arc.display • DisplayObject • Sprite • Shape • SheetMovieClip • DisplayObjectContainer • MovieClip • JSONMovieClip • TextField
- 37. DisplayObject • 全ての表示要素がこれを継承している • setX,setScaleY, getAlpha等のgetter/setter メソッドを保持
- 38. Sprite • 画像を一つ格納することができる • DisplayObjectのサブクラス •arc.display.Imageオブジェクトを取得して 利用
- 39. Sprite • 例 var obj = new arc.display.Sprite(system.getImage('sample.png')); obj.setAlign(arc.display.Align.CENTER); obj.setX(100); obj.setY(100); obj.setAlpha(0.5);
- 40. Shape • 自由に描画ができる • 塗りを行うbeginFill, endFill, • 線の描画を行うbeginStroke, endStroke • 線をつなぐlineTo, moveTo • 図形の描画を行う drawCircle, drawRect
- 41. Shape • 例 var shape = new arc.display.Shape(); shape.beginStroke(10, 0x00ffff); shape.beginFill(0xff0000); shape.drawCircle(200,200, 100); shape.endFill(); shape.endStroke();
- 42.
- 43. SheetMovieClip • コマが連続した画像をアニメーションさせる var mc = new arc.display.SheetMovieClip( this._system.getImage('sample.png'), 174, 12); this.addChild(mc); mc.play(true);
- 44.
- 45. DisplayObjectContainer • DisplayObjectの子供を持つことができる表示オブ ジェクト • addChild, removeChild, contains, setMask var container = new arc.display.DisplayObjectContaner(); var obj = new arc.display.Sprite(system.getImage('sample.png')); container.addChild(obj);
- 46. MovieClip • DisplayObjectContainerを継承 • FlashのMovieClipを再現 var mc = new arc.display.MovieClip(12, true); mc.addChild(ball0, { " 1 : {x:0, y:0, transition:arc.anim.Transition.SINE_OUT}, " 5 : {x:250, y:100} }); mc.addChild(ball1, { " 1 : {scaleX:0.5, scaleY:0.5, transition:arc.anim.Transition.SINE_OUT}, " 10 : {scaleX:3, scaleY:3} });
- 47.
- 48.
- 49. JSONMovieClip • JSON { " "fps":24, " "frame":40, " "main":3, " "lib":[ " " {"id":1, "type":"data", "data":"sample.png", "pos":[0,0,34,34]}, " " {"id":2, "type":"mc", "loop":"true", "timelines":[ " " " {"target":1, "align":"CENTER", "keyframes":{ " " " " "1" : {"x":17, "y":17, "transition":"SINE_IN"}, " " " " "10": {"y":117, "transition":"SINE_OUT"}, " " " " "19": {"y":17} " " " }} " " ]}, " " {"id":3, "type":"mc", "loop":"true", "timelines":[ " " " {"target":2, "align":"LEFT", "keyframes":{ " " " " "1" : {"x":-34, "transition":"LINEAR"}, " " " " "40": {"x":320} " " " }} " " ]} " ] }
- 50. JSONMovieClip • JS var ajax = new arc.Ajax(); var self = this; ajax.addEventListener(arc.Event.COMPLETE, function(){ " var mc = new arc.display.JSONMovieClip(ajax.getResponseJSON()); " self.addChild(mc); }); ajax.load('sample.json');
- 51.
- 52. TextField • テキスト表示を行う • Alignの設定、文字色、フォントの設定 var numTxt = new arc.display.TextField(); numTxt.setX(10); numTxt.setY(100); numTxt.setAlign(arc.display.Align.CENTER); numTxt.setFont("Helvetica", 20, true); numTxt.setColor(0xff0000);
- 53.
- 54. arc.anim.Animation • Tweenerライク var target = new arc.display.Sprite(system.getImage('ball0.png')); var anim = new arc.anim.Animation(target, " {x:0, y:0}, " {x:200, y:100, time:1000, transition:arc.anim.Transition.SINE_OUT}, " {x:100, y:300, time:1000, transition:arc.anim.Transition.SINE_OUT}); anim.addEventListener(arc.Event.COMPLETE, function(e){ " console.log('animation finished'); }); anim.play();
- 55.
- 56.
- 57. Touch Event • TOUCH_START • タッチ開始 • TOUCH_MOVE • タッチが動いた • TOUCH_END • タッチ終了
- 58. Touch Event var sprite= new arc.display.Sprite(system.getImage('ball.png')), sprite.addEventListener(arc.Event.TOUCH_START, function(event){ console.log(‘touchStart x : ‘ + event.x + ‘ y : ‘ + event..y); }); sprite.addEventListener(arc.Event.TOUCH_MOVE, function(event){ console.log(‘touchMove x : ‘ + event.x + ‘ y : ‘ + event..y); }); sprite.addEventListener(arc.Event.TOUCH_END, function(event){ console.log(‘touchEnd x : ‘ + event.x + ‘ y : ‘ + event..y); });
- 59.
- 60.
- 61. Timer • 経過時間を取得したい時に使う • Dateは重いのでメインループから時間経過を取得 var timer = new arc.Timer(); timer.start(); console.log(timer.getElapsed());
- 62. CountTimer • setIntervalやsetTimeoutの代わりに使う • ゲームの進行速度に合わせて実行 var countTimer = new arc.CountTimer(3000, 1); countTimer.addEventListener(arc.Event.TIMER_COMPLETE, function(){ console.log(‘count’); }); countTimer.start();
- 63. ImageManager • 画像の読み込みを管理する • 複数の画像を読み込みたい時に利用 var imageManager = new arc.ImageManager(); imageManager.addEventListener(arc.Event.COMPLETE, function(){ console.log(‘loaded images’); }); imageManager.load([‘a.png’, ‘b.png’]);
- 64. System • 最初にインスタンス化するシステムクラス • いくつか便利なメソッドを用意している system.setFullScreen(); //フルスクリーンで表示 system.getFps(); //実測FPSを取得
- 65.
- 66. enchant.js • DOMベース • ゲーム制作における機能が豊富（サウ ンド再生、マップ等） • Canvas版に期待
- 67. EaselJS • Canvasベース • APIはかなりAS3.0に似せてある •クラスベースで開発しない • Adobeがサポート
- 68.
- 69.
- 70.
Editor's Notes
- #2 \n
- #3 \n
- #4 \n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 \n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 \n
- #56 \n
- #57 \n
- #58 \n
- #59 \n
- #60 \n
- #61 \n
- #62 \n
- #63 \n
- #64 \n
- #65 \n
- #66 \n
- #67 \n
- #68 \n
- #69 \n
- #70 \n
- #71 \n