(アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ...

22
~「○」と「→」でゲームをつくろう~ まる やじるし CoderDojo Mito http://coderdojo-mito.com/ Team Kamada 茨城大学工学部 情報工学科 鎌田研究室 http://puma.cis.ibaraki.ac.jp/ Ver. 2.3 (アイラ・タッチ) IslayTouch Islay Touch アイラタッチ アイラ タッチ アイラ タッチ

Transcript of (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ...

Page 1: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定

~「○」と「→」でゲームをつくろう~まる やじるし

CoderDojo Mito

http://coderdojo-mito.com/

Team Kamada茨城大学工学部情報工学科鎌田研究室

http://puma.cis.ibaraki.ac.jp/

Ver. 2.3

(アイラ・タッチ)

IslayTouchIslay Touchアイラタッチアイラタッチアイラ タッチ

Page 2: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定

•「状態遷移図」を書くことでプログラムを作る

•状態(○) と 遷移(→)の組み合わせでゲームの動きを直観的に定義する

Islay(アイラ)について

じょうたいせんい ず

じょうたい せん い

Page 3: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定

•「状態遷移図」を書くことでプログラムを作る

•状態(○) と 遷移(→)の組み合わせでゲームの動きを直観的に定義する

Islay(アイラ)について

状態 状態遷移じょうたい じょうたいせん い

じょうたい せん い

じょうたいせんい ず

Page 4: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定

Islay(アイラ)について

Page 5: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定

キャラクタの

見た目うごき

状態を変えるための

条件

Islay(アイラ)について

じょうたい

状態

せん い

遷移

Page 6: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定

•タブレット端末で使えるIslay

•タッチジェスチャーで操作可能

IslayTouch(アイラ・タッチ)

Page 7: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定

•工夫しだいでいろんなゲームが作れる!

どんなゲームが作れるの?

Page 8: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定

•消防車ゲーム

今回のゲーム

Page 9: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定

IslayTouchの使い方

Page 10: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定

IslayTouchの使い方

•状態(○)を作るじょうたい

Page 11: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定

IslayTouchの使い方

•状態のとくちょうを変える見た目

アクション1、アクション2

じょうたい

Page 12: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定

IslayTouchの使い方

•遷移(→)を作るせんい

Page 13: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定

IslayTouchの使い方

•遷移のとくちょうを変えるせんい

Page 14: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定

IslayTouchの使い方

•グループをつくる

Page 15: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定

IslayTouchの使い方

•キャラクタをグループに入れる

Page 16: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定

IslayTouchの使い方

•グループの中身を確認する

Page 17: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定

IslayTouchの使い方

•キャラクタをつくる

Page 18: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定

「消防車ゲーム」の作り方(デモ)

Page 19: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定

•キャラクタの見た目を変えてみよう

•ほのおをもっと増やしてみよう

•消防車のキャラクタを指で動かせるようにしてみよう

•シューティングゲームに改造してみよう

•カウンターを作ってゲームの得点を表示してみよう

ゲームを改造してみよう

などなど

Page 20: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定

•同じキャラクタをもっと登場させてみよう

ヒント

Page 21: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定

•指で動かせるようにしてみよう

ヒント

Page 22: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定

•ゲームの背景を変えてみよう

ヒント