OGS資料Vol.1 - Atlas.jsブログ

)
者
発
開
.js
s
a
l
t
A
(
悟⼤大
堀
RUBIN ⽉月3⽇日　5
年年
4
1
0
2
イベントの流流れ
①今回使⽤用する⾔言語（Atlas.js）の説明、クイズ
②班ごとで既にあるプログラムの改造案の話し合い
③改造案の発表
④ゲーム作り開始
（班ごとにAtlasマスターがつくので安⼼心してください）
⑤作成したゲームの発表会
⑥終了了
イベントの⽬目的
①⾼高知にプログラミングを本格的に学ぶセミナーが少ない
②クリエイティブな⼈人材を⾼高知から輩出したい
③笑顔のあふれる場を作りたい
④Atlas.jsを世に広めるため
①⾼高知にJavaScriptを本格的に学ぶセミナーが少ない
!   WCK（ウェブクリエイターズ⾼高知）
!   JAWS-‐‑‒UG⾼高知
わたしの知っている限りのWeb関係の勉強会の団体
ウェブクリエイターズ⾼高知
http://www.kochiweb.com/
JAWS-‐‑‒UG⾼高知
OGS(Oneday Game Seminar)
And so on…
!   イラストセミナー
!
Ember.jsセミナー
!
Node.jsセミナー
もっと知識識を共有できる勉強会を増やしていきたい！
②クリエイティブな⼈人材を⾼高知から輩出したい
クリエイティブな発想
あなたはコップを何に使う？？
回答
!   飲み物を飲む
!   割って飾りに使う
!   ⼤大きいコップなのでお⾵風呂呂にする
!   花瓶にする
!   積み重ねて家を建てる
③笑顔あふれる場を作りたい
④Atlas.jsを世に広めるため
Atlas.js(http://steelydylan.github.io/Atlas.js/)
名前の由来
世界中の⼈人たちが、
このライブラリで
夢を描けば
それは１つの
世界地図となる！！
Atlasってナニ？？
!   JavaScriptという⾔言語上で動作する教育⽤用のゲームエンジン
!   HTMLのCanvasを⾃自由に操作できます。
(HTMLとは、webページ上にボタンなどの部品を配置していくための⾔言語です。)
(Canvasは絵や映像などを表⽰示する、HTMLの部品の１つです)
JavaScriptとは…
!   Webブラウザ上で動作するプログラミング⾔言語です！！
すでにたくさんのゲームがAtlas.jsから⽣生まれています
プログラミング⽀支援ツール Atlas Editor
Atlas Editor 機能
! Atlas.jsの利利⽤用
!   ⾃自分の書いたコードの保存
!   他⼈人の書いたコードの利利⽤用
!   画像のアップロードと利利⽤用
!   他のJavaScriptの利利⽤用
Atlas.jsに似たjsライブラリ
tmlib.js
なぜ、Atlas.jsなのか??
★Atlas⾃自体のコードが短い。⾒見見やすい
★プラグインも簡単に作成可能
★実⾏行行速度度が速い
★実⾏行行結果を簡単に確認できるエディタ
Atlasエディタを使う前に
すこしお勉強しましょう。
すでに、知ってるよ。という⽅方も多いかもしれません。
そんな⽅方は、知らない⼈人に教えてあげてください。
まずは、基本的なプログラミングから
a = 3 + 4;
a == ?
a = 3;
a += 3;
a == ?
a++;（インクリメント）
現在の値+1します
a = 3;
a++;
a == ?
a-‐‑‒-‐‑‒;（デクリメント）
現在の値-‐‑‒1します
If⽂文
IF=もしも○○ならば
A = 3;
B = 4;
A = A + B;
if(A == 7){
A++;
}
A == ?
A = 3;
B = 4;
A = A + B;
if(A == 8){
A++;
}else{
A -‐‑‒= 3;
}
A == ?
Atlas.jsの使い⽅方。
①導⼊入⽅方法
②各クラスについての説明
③クラスの作り⽅方
④イベントリスナの設定⽅方法
Atlas.js導⼊入⽅方法
<html>
<head>
HTML
<script src=“Atlas.js”></script>
</head>
<body>
</body>
</html>
Atlasエディタを使えば導⼊入⽅方法を知らなくても
ソースコードなどをダウンロードできるので
安⼼心してください。
Atlas.jsサンプル
Atlas();//おまじない
window.onload = function(){
var game = new App();
game.load([“bird.png”,”bird”]);
var bird = new Sprite(“bird”,32,32);
bird.setPosition(100,100);
game.addChild(bird);
}
最初のおまじない Atlas()
Atlas()
Atlas.jsが提供している様々なクラスを
利利⽤用可能になります！！
へ！？？
クラス？？学校？？
違います
クラスとは…
!   クラスとは製品を⽣生産する⼯工場のようなものだとおもってください。
!   つぎのページで詳しく説明します。
クラスは工場のようなもの
Car()⼯工場
var car = new Car()
この場合、
クラス（⼯工場）は Car()
オブジェクトは
carになります
⼯工場からオブジェクト（製品）が⽣生成されます
オブジェクトはいろいろな機能と情報を持っています
!   機能ー＞メソッド
!   情報ー＞プロパティ
例例えば…
⾞車車を例例にします
car.run() ⾛走ります
メソッド（機能）は⾛走る
car.color ⻘青です
プロパティ（情報）は⻘青⾊色
Atlas.jsの主なクラス（⼯工場）
!   App() ゲーム画⾯面を⽣生成
!   Sprite() キャラクターを⽣生成
! Shape.Box() 箱を⽣生成
! Shape.Circle() 円を⽣生成
!   Map()
マップを⽣生成
!   Text() ⽂文字を⽣生成
App()工場
ゲーム画⾯面を⽣生成します
⼀一番⼤大事な⼯工場です！！
var game = new App()
gameという製品がApp()⼯工場から⽣生成されました
ゲーム画⾯面の座標系
X
Y
学校でならった座標系と⽐比べると
Yの⽅方向が逆ですね！！
ゲーム画⾯面の機能
! game.setColor(“green”);
画⾯面の⾊色を変更更します
クイズ
!  画⾯面の⾊色を⾚赤⾊色にしてみましょう
答え
! game.setColor(“red”)です！！
簡単ですね！！
ゲーム画⾯面の機能
! game.setSize(200,200);
!   画⾯面サイズを縦200px、横200pxにします
200px
200px
ゲーム画⾯面の機能
! game.setQuality(100,100);
!   ゲームの座標の最⼤大値を縦と横で決定します。
…少し難しいですね
いってしまえば、ゲームの解像度度を定義します
テレビをイメージすればわかりやすいですね。
画素数
1366 * 768
テレビ⾃自体の
⼤大きさが
setSize()
画素数が
setQuality()
クイズ
１ setSize(500,500)とsetQuality(250,250)
２ setSize(500,500)とsetQuality(500,500)
どちらが、同じ画像でも⼤大きく⾒見見えるでしょうか？？
答え
１です！！
game.setQuality(250,250)
game.setQuality(500,500)
図形⼯工場
!   ゲーム画⾯面上への図形の表⽰示に便便利利な図形⼯工場
! Shape.Box()
四⾓角形の⽣生成⼯工場
! Shape.Circle()
円の⽣生成⼯工場
http://atlas-‐‑‒editor.ap01.aws.af.cm/user/Atlasjs/
535b4a534a43ede50a000007
Shape.Box()⼯工場
⾊色
幅
⾼高さ
箱（四⾓角）が⽣生成されます。
⾊色・幅・⾼高さという材料料を⼯工場にいれる必要があります。
例例） var box = new Shape.Box(“blue”,30,30);
Shape.Circle()⼯工場
色
半径
円が⽣生成されます。
⾊色と、半径という材料料を⼯工場にいれる必要があります。
例例） var circle = new Shape.Circle(“blue”,30);
Sprite()⼯工場
スプライト物体を⽣生成します
つぎのページからスプライトとは何か解説していきます
http://atlas-‐‑‒editor.ap01.aws.af.cm/user/Atlasjs/52ad3ac44c2e87f276000001
左のような画像のことをスプライトシートとよびます。
スプライトシートを切切り取って作成された
画像をスプライトと呼びます。
スプライトシートは事前に読み込んでおく
必要があります。
画像のロード
!   App()⼯工場から、ゲーム画⾯面を⽣生成するにはvar game = new App()
でしたね。
!   この製品gameは画像や⾳音楽をロードしてくれる機能を持っています。
!   ロードとは、使う画像を前もって、読み込んでおく機能のことです。
画像の読み込みと利利⽤用
! var game = new App()
! game.load([“bird.png”,”bird”]);
”bird.png”という画像を読みこみ、
birdという名前を付けるという意味です。
Sprite利利⽤用のためのレシピ
32px
32px
１つあたりのSpriteの幅が32px 32px
birdという名前がついた
スプライトシートの場合
var bird = new Sprite(“bird”,32,32)
クイズ
!   次の画像の場合 var sprite = ??
??には何を⼊入れればよいでしょう??
ただし、
game.load([“abc.png”,”aokun”]);
と読み込んだとします
20px
40px
abc.png
答え
! var sprite = new Sprite(“aokun”,20,40);
スプライトの切切り取りを失敗すると…
ありゃりゃ…
クイズ
!   このようにスプライトがうまく切切り取れていません。
!   うまく切切り取るためのコードを考えてみましょう
http://atlas-‐‑‒editor.ap01.aws.af.cm/user/Atlasjs/
535f43a2f8d392d312000015
Map()⼯工場
Mapを⽣生成します
引数はSpriteオブジェクトと同じ、Map(“画像の名前”,横幅、⾼高さ)
Mapの作り⽅方
map.drawData = [[0,0,0,0,1,1,0,0,0,0],
[0,0,0,0,1,1,0,0,0,0],
[0,0,1,1,1,1,1,1,0,0],
[0,0,1,1,1,1,1,1,0,0],
[1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1],
[0,0,1,1,1,1,1,1,0,0],
[0,0,1,1,1,1,1,1,0,0],
[0,0,0,0,1,1,0,0,0,0],
[0,0,0,0,1,1,0,0,0,0]];
これだけ！！
クイズ
次のページでオリジナルのマップを作ってみよう！！
http://atlas-‐‑‒editor.ap01.aws.af.cm/user/Atlasjs/
535b5206f8d392d312000004
言い忘れていましたが…
!   spriteやbox、circleなどはgameに放り込んでやら
なければ表⽰示はされません
! game.addChildren(sprite,box,circle);
さあ、ゲームの電源をいれましょう
! game.start();
⼯工場を⾃自分で造る
!   ⼯工場を⾃自分でつくることもできるし、
!   既存の⼯工場を拡張することも出来る
Atlas.createClass(Sprite,{
});/*既存の者から新しい⼯工場を*/
Atlas.extendClass(Sprite,{
});/*既存の⼯工場のリフォーム*/
例例えば、バード⽣生成⼯工場を作る
var Bird = Atlas.createClass(Sprite,{
initialize:function(){
this.inherit(“bird”,32,32);
},
touchStart:function(e){
this.setPosition(e.x,e.y);
}
});
var bird = new Bird();
イベントリスナー
「○○の時に△△しろよ」という命令令
例例えば、
!   画⾯面がタッチされた時
!   キーボードが押され時
Atlas.jsがサポートしているイベントリスナー①
!
touchStart ・・・画⾯面内でクリックした時、もしくは指でタッチされた時
!
touchMove・・・画⾯面内でマウスが動いた時、もしくは指が動いた時
!
touchEnd・・・画⾯面内でクリックが終わった時、もしくは指が離離れた時
まだ続きます…
Atlas.jsがサポートしているイベントリスナー②
!
keyDown・・・キーボードがクリックされた時
!
keyUp・・・キーボードのクリックが終わった時
!
enterFrame・・・お前は永遠にこの命令令に従い続けなければならない！！
touchStartの詳しい説明
sprite.touchStart = function(e){
}
this.setPosition(e.x,e.y);
スプライトをタッチした位置に移動させます。
この際にeはタッチした位置座標を持っています。
e.x x座標
e.y y座標
http://atlas-‐‑‒editor.ap01.aws.af.cm/user/Atlasjs/
53592e974a43ede50a000003
keyDownの詳しい説明
sprite.keyDown = function(key){
if(key.down)
this.y++;
}
もし、⼗十字キーの「下」が押されたらspriteのy座標を
１減らします
この際にkeyにはキーボード情報が格納されています
http://atlas-‐‑‒editor.ap01.aws.af.cm/user/Atlasjs/
5360650bf8d392d31200001a
keyが持っている情報
key.a aが押されたかどうか
key.z zが押されたかどうか
key.space spaceが押されたかどうか
key.enter enterが押されたかどうか
key.shift shiftが押されたかどうか
key.down ⼗十字キー下が押されたかどうか
クイズ
!   spriteを4⽅方向に動けるようにしてみましょう
回答例例
sprite.keyDown = function(key){
if(key.down) this.y-‐‑‒-‐‑‒;
if(key.up) this.y++;
if(key.right) this.x++;
if(key.left) this.x-‐‑‒-‐‑‒;
}
enterFrameの詳しい説明
!   例例えば、
sprite.enterFrame = function(){
this.x++;//右へ１移動
}
この場合、spriteは右に永遠に移動していきます
以上！
あとはあなたの好奇⼼心次第。
さあ、プログラミングの世界へ旅⽴立立ちましょう！
Atlasに関する情報発信は下記のサイトでやってます。
http://atlasjs.com
みんな⾒見見てくださいね！！
さっそく次のプログラムの改造案を話し合ってください
•  カーゲーム
http://atlas-‐‑‒editor.ap01.aws.af.cm/user/
yukihotatu/533ebfa4da70359a59000002
•  ブロック崩し
http://atlas-‐‑‒editor.ap01.aws.af.cm/user/
Cottonbud9422/535ﬀ724f8d392d312000017
作品発表
!   さぁ、みなさん。出来た作品を発表しましょう！！
RUBINという団体
!   プログラマ9名、デザイナ7名からなる、団体です。
!   「できるをもっと楽しく」をコンセプトに活動して
います。
!   RUBINは「なにかを始めたい⼈人」に⾃自⼰己実現の⽅方法
を提⽰示していきます。
プログラミングと教育
!   MEAN教育
(どんなWebアプリでも作れるようになります)
Atlas.js
Ember.js
Node.js
MongoDB
上の階段にいる者が下の階段にいる者を引き上げる⽅方針です
興味のある⽅方は ess_̲[email protected] まで
RUBIN School 候補地 1
高知大学
RUBIN School 候補地 2
0-1 高知 Booster
RUBIN School 候補地 3
高知工科大学
今後のRUBINの展開
ゲームを作りたい
RUBIN ver.0 Atlas.js
アプリを作りたい
何かした人
たちが
集まる場
⽣生活習慣を改善したい
絵を描きたい
RUBIN ver.1 IDEAL
なにをするのも簡単じゃない
•  だから、私たちは勉強会を開いたり、そのためのア
プリを作ったりして、「階段」を作ります！！
•  いろんなイベントを開催していきますので、みんな
で楽しく⾃自分を⾼高めていきましょう！！
おまけ
RUBIN ver.1 IDEAL
アンケートにご協⼒力力下さい
!   アンケート⽤用紙をお配りしますので、アンケートにご協⼒力力ください。
お問い合わせ
090 – 5276 -‐‑‒ 6093
[email protected]
https://www.facebook.com/rubin.inc
https://www.facebook.com/rubin.inc
http://atlasjs.com
[email protected]
https://www.facebook.com/OnedayGameSeminar
ご気軽にご連絡ください。

Download Report