Weitere ähnliche Inhalte Ähnlich wie Arctic.js (20) Arctic.js10. HTML5
• DOM
• style.left、style.topをいじる方法
• CSS3
• CSSでアニメーションを記述
• Canvas
• Canvasに描画しまくる
22. タイムベース
• setInterval / setTimeout内で経過時
間を取得して、適切な値を設定する
• 描画が間引かれる
• 体感的な速度はどの環境でも保たれる
• Arctic.jsではこちらを採用
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;
}
});
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);
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');
36. arc.display
• DisplayObject
• Sprite
• Shape
• SheetMovieClip
• DisplayObjectContainer
• MovieClip
• JSONMovieClip
• TextField
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();
43. SheetMovieClip
• コマが連続した画像をアニメーションさせる
var mc = new arc.display.SheetMovieClip(
this._system.getImage('sample.png'), 174, 12);
this.addChild(mc);
mc.play(true);
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}
});
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');
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);
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();
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);
});
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を取得
Hinweis der Redaktion \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n