Dart + StageXL
GDG DevFest Japan 2014 Spring in Kyoto
2014.4.6
GDG 京都 藏 文子
自己紹介
❖
主 ： UI / UX 設計
❖ Web (画面 ン )
❖ PC ー ョン
❖ 組込 機器
(家電 医療機器 ー ン等
❖
そ 前 ち 変わ たキ
❖ 臨床検査技師
❖
GDG 京都 ネー ー
❖
Blog: ち
http://ofuku.blog.so-net.ne.jp
Dart い
❖ ー ンソー 開発
❖ ベー ー ョン 開発可能
❖ 構造化 ン 言語
❖
ベー ョ ン ン
❖
JabaScript 変換 実行 可能
❖ Jave, C#, JavaScript 良く似た文法
❖ ー ョン 現在 v.1.3
Dart 基本 学ぶ
❖ Dart FLIGHT SCHOOL Kyoto ー
ン 先 資料
“ 海賊 た ” 始 薦
※ 口頭 話 いた部分 後日追記 た
StageXL for Dart
❖ Starge ー ワー 用い ン ン
作成可能
❖ Flash
❖ Flash API ActionScript3 近い書式
❖ HTML5 Canvas 動作
❖ StageXL for Dart
StageXL 構造
❖
BitmapData
❖
EventDispatcher
❖ DisplayObject
❖ Bitmap
❖ Shape
❖ InteractiveObject
❖ SimpleButton
❖ TextField
❖ MovieClip
❖ DisplayObjectContainer
❖ Stage
❖ Sprite
ActionScript Dart 比較
❖ http://www.stagexl.org/docs/actionscript-dart.ht
ml
StageXL
❖ http://www.stagexl.org/docs/api/stagexl.html
様々 見
❖ Dart for StageXL showcase
❖ Paticle Emitter
❖ Texture Packer
❖ Flump
❖ Flash Professional - Toolkit for Dart
わともあれ Getting Start
参考URL：http://www.stagexl.org/docs/getting-started.html
Dart ン ー
❖ Getting and Installing Dart Is Easy!
Web ー ョン 作成
❖ Dart Edit 起動
Menu File New Application 選
択
Application名 入力
→
Pubspec.yaml 編集
❖ Web ー ョン pubspec.yaml
Dependencies Stagexl 追加
❖
Dependencies Add
❖
Add dependency Enter name of package
stagexl 入力
❖
Stagexl 選択 OK ン 押
(Particle 使う場合 stagexl_particle 選択 )
❖
Command +S 保存
→
Packages 確認
❖ Stagexl packages 追加 い 確認
HTML 編集
❖ 元 ソー 部分
<div id=“sample_container_id”>
<p id="sample_text_id">Click me!</p>
</div>
❖ 変更部分
<canvas id="stage" width="800" height="600">
</canvas>
Dart ー 編集
❖ 記 赤い く ー 書 換え
import 'dart:html' as html;
import 'package:stagexl/stagexl.dart'; void main() {
// setup the Stage and RenderLoop var canvas =
html.querySelector('#stage'); var stage = new Stage(canvas);
var renderLoop = new RenderLoop(); renderLoop.addStage(stage);
// draw a red circle
var shape = new Shape();
shape.graphics.circle(100, 100, 60); shape.graphics.fillColor(Color.Red); stage.addChild(shape);
}
Getting Started –
Write your first Dart code ソー ー 引用
Display List 例
import 'dart:html' as html;
import 'package:stagexl/stagexl.dart'; void main() {
var canvas = html.querySelector('#stage'); var stage = new Stage(canvas);
var renderLoop = new RenderLoop(); renderLoop.addStage(stage);
var painting = new Painting(); painting.x = 40;
painting.y = 40;
stage.addChild(painting); }
class Painting extends DisplayObjectContainer {
final List<int> colors = [Color.Red, Color.Green, Color.Blue, Color.Brown];
Painting() {
var background = new BitmapData(400, 300, false, Color.BlanchedAlmond);
var backgroundBitmap = new Bitmap(background); addChild(backgroundBitmap);
for(var i = 0; i < colors.length; i++) {
var box = new BitmapData(100, 100, false, colors[i]); var boxBitmap = new Bitmap(box);
boxBitmap.x = 80 + i * 50; boxBitmap.y = 60 + i * 30; addChild(boxBitmap); }
}} 引用先URL:
http://www.stagexl.org/docs/wiki-articles.html?article=introduction
Display List い
❖ StageXL ン ン 表示
概念 依存
❖ Display List 画面 表示
含 階層 持
❖ 階層 構築
基本的 種類
❖
The stage
❖
Display Object Container
❖
Display Object
The Stage
❖ ー 表示 階層 ー
❖ HTML5 canvas 要素 ー
❖ 通常 ー う 高度
ー 利用
Display object container
❖ 名前 示 う Display Object ン 表示用
ン
❖ Stage 自体 Display Object ン
❖ ン 子 display Object 追加
Display Object 階層 構築可能
❖ ー 移動 た ン 回転 せた場合 べ
子たち そ 応 動作
❖ 表示 ン 削除 べ 子 削除
結果的 画面 消え
Display Object
❖ Display Object 画面 視覚的要素
❖ 最 基本的 Display Object Bitmap
❖ Bitmap セ ー 含 2D ー た
非常 要 構成要素
❖ Display Object 階層 た Display Object 奥
行 管理 担当
❖ 子 Display Object そ 前 前 位
置
Resouce manager 利用
❖ ー や音楽 多く 異 ソー 使用
❖ そ 読 込 た ソー ネー ー 使用
可能
❖ ソー ネー ー 新 い ン ン 作成
べ ソー 名前 URL 追加
Resouce manager 利用例
❖ ソー ネー 画像 追加
❖ 各画像 供 い 画像 固有 名前 URL
付加
❖ ソー ネー べ ー 読 込 終
了 た 指定 た一意 名前 BitmapDatas
セ 可能
Resouce manager ３ 画像
追加 た例
import 'dart:async';
import 'dart:html' as html;
import 'package:stagexl/stagexl.dart'; void main() {
var canvas = html.querySelector('#stage'); var stage = new Stage(canvas);
var renderLoop = new RenderLoop(); renderLoop.addStage(stage);
var resourceManager = new ResourceManager()
..addBitmapData("house", "../common/images/House.png") ..addBitmapData("sun", "../common/images/Sun.png") ..addBitmapData("tree", "../common/images/Tree.png"); resourceManager.load().then((_) {
var sun = new Bitmap(resourceManager.getBitmapData("sun")); var tree = new Bitmap(resourceManager.getBitmapData("tree")); var house = new
Bitmap(resourceManager.getBitmapData("house")); // Not shown: set x and y properties of sun, tree, house stage.addChild(sun);
stage.addChild(tree); stage.addChild(house); });
}
画像 ソー 引用
：http://www.stagexl.org/docs/w iki-articles.html?article=introdu ction
利用 た簡単
❖ ー ー 利用
❖
ー ー 調整
❖ 雪景色 画像 合わせ
※ソー ー - 後日追加分
library dart_snow;
import 'dart:html' as html;
import 'package:stagexl/stagexl.dart';
import 'package:stagexl_particle/stagexl_particle.dart'; void main() {
var stage = new Stage(html.querySelector('#stage'), webGL: true); var renderLoop = new RenderLoop();
renderLoop.addStage(stage);
//---
ー ーConfig
//---
Resouce manager ー 雪景色 合わせ
//--- }
※ソー ー – Particle Emitter Config 部分
var particleConfig = { "maxParticles":2000, "duration":0,
"lifeSpan":5, "lifespanVariance":0, "startSize":8, "startSizeVariance":12, "finishSize":0, "finishSizeVariance":15, "shape":"circle", "emitterType":0,
"location":{"x":0, "y":0}, "locationVariance":{"x":96, "y":0}, "speed":161, "speedVariance":0,
"angle":0, "angleVariance":360, "gravity":{"x":0, "y":114},
"radialAcceleration":-14, "radialAccelerationVariance":127, "tangentialAcceleration":0,
"tangentialAccelerationVariance":0,
"minRadius":0, "maxRadius":100, "maxRadiusVariance":0, "rotatePerSecond":0, "rotatePerSecondVariance":0,
"compositeOperation":"lighter",
"startColor":{"red":1, "green":1, "blue":1, "alpha":1}, "finishColor":{"red":1, "green":1, "blue":1, "alpha":1} };
※ソー ー – Resouce Manager 部分
var resourceManager = new ResourceManager() ..addBitmapData("odou", "images/syokokuji.jpg"); resourceManager.load().then((_) {
// Snow scene
var odou = new Bitmap(resourceManager.getBitmapData("odou")); stage.addChild(odou);
// Particle of snow
var particleEmitter = new ParticleEmitter(particleConfig); particleEmitter.setEmitterLocation(600, -250);
stage.addChild(particleEmitter); stage.juggler.add(particleEmitter);
});
Dart 日本語資料
❖ Dart FLIGHT SCHOOL Kyoto 資料
Dart 基本 理解 役 立ち
資料 当日 ー 右側 ン あ
❖ 書籍 : ン 言語 Dart
Chris Buckett 著, あ うや 監修, ASCII出版
※ 注意： 記資料 StageXL for Dart 記述 あ せ
