(アイラ・タッチ) - islaytouch · •「状態遷移図」を書くことでプログ...
TRANSCRIPT
![Page 1: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定](https://reader034.vdocuments.mx/reader034/viewer/2022042215/5ebb9adcab00f82ddd33cf96/html5/thumbnails/1.jpg)
~「○」と「→」でゲームをつくろう~まる やじるし
CoderDojo Mito
http://coderdojo-mito.com/
Team Kamada茨城大学工学部情報工学科鎌田研究室
http://puma.cis.ibaraki.ac.jp/
Ver. 2.3
(アイラ・タッチ)
IslayTouchIslay Touchアイラタッチアイラタッチアイラ タッチ
![Page 2: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定](https://reader034.vdocuments.mx/reader034/viewer/2022042215/5ebb9adcab00f82ddd33cf96/html5/thumbnails/2.jpg)
•「状態遷移図」を書くことでプログラムを作る
•状態(○) と 遷移(→)の組み合わせでゲームの動きを直観的に定義する
Islay(アイラ)について
じょうたいせんい ず
じょうたい せん い
![Page 3: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定](https://reader034.vdocuments.mx/reader034/viewer/2022042215/5ebb9adcab00f82ddd33cf96/html5/thumbnails/3.jpg)
•「状態遷移図」を書くことでプログラムを作る
•状態(○) と 遷移(→)の組み合わせでゲームの動きを直観的に定義する
Islay(アイラ)について
状態 状態遷移じょうたい じょうたいせん い
じょうたい せん い
じょうたいせんい ず
![Page 4: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定](https://reader034.vdocuments.mx/reader034/viewer/2022042215/5ebb9adcab00f82ddd33cf96/html5/thumbnails/4.jpg)
Islay(アイラ)について
![Page 5: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定](https://reader034.vdocuments.mx/reader034/viewer/2022042215/5ebb9adcab00f82ddd33cf96/html5/thumbnails/5.jpg)
キャラクタの
見た目うごき
状態を変えるための
条件
Islay(アイラ)について
じょうたい
状態
せん い
遷移
![Page 6: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定](https://reader034.vdocuments.mx/reader034/viewer/2022042215/5ebb9adcab00f82ddd33cf96/html5/thumbnails/6.jpg)
•タブレット端末で使えるIslay
•タッチジェスチャーで操作可能
IslayTouch(アイラ・タッチ)
![Page 7: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定](https://reader034.vdocuments.mx/reader034/viewer/2022042215/5ebb9adcab00f82ddd33cf96/html5/thumbnails/7.jpg)
•工夫しだいでいろんなゲームが作れる!
どんなゲームが作れるの?
![Page 8: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定](https://reader034.vdocuments.mx/reader034/viewer/2022042215/5ebb9adcab00f82ddd33cf96/html5/thumbnails/8.jpg)
•消防車ゲーム
今回のゲーム
![Page 9: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定](https://reader034.vdocuments.mx/reader034/viewer/2022042215/5ebb9adcab00f82ddd33cf96/html5/thumbnails/9.jpg)
IslayTouchの使い方
![Page 10: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定](https://reader034.vdocuments.mx/reader034/viewer/2022042215/5ebb9adcab00f82ddd33cf96/html5/thumbnails/10.jpg)
IslayTouchの使い方
•状態(○)を作るじょうたい
![Page 11: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定](https://reader034.vdocuments.mx/reader034/viewer/2022042215/5ebb9adcab00f82ddd33cf96/html5/thumbnails/11.jpg)
IslayTouchの使い方
•状態のとくちょうを変える見た目
アクション1、アクション2
じょうたい
![Page 12: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定](https://reader034.vdocuments.mx/reader034/viewer/2022042215/5ebb9adcab00f82ddd33cf96/html5/thumbnails/12.jpg)
IslayTouchの使い方
•遷移(→)を作るせんい
![Page 13: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定](https://reader034.vdocuments.mx/reader034/viewer/2022042215/5ebb9adcab00f82ddd33cf96/html5/thumbnails/13.jpg)
IslayTouchの使い方
•遷移のとくちょうを変えるせんい
![Page 14: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定](https://reader034.vdocuments.mx/reader034/viewer/2022042215/5ebb9adcab00f82ddd33cf96/html5/thumbnails/14.jpg)
IslayTouchの使い方
•グループをつくる
![Page 15: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定](https://reader034.vdocuments.mx/reader034/viewer/2022042215/5ebb9adcab00f82ddd33cf96/html5/thumbnails/15.jpg)
IslayTouchの使い方
•キャラクタをグループに入れる
![Page 16: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定](https://reader034.vdocuments.mx/reader034/viewer/2022042215/5ebb9adcab00f82ddd33cf96/html5/thumbnails/16.jpg)
IslayTouchの使い方
•グループの中身を確認する
![Page 17: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定](https://reader034.vdocuments.mx/reader034/viewer/2022042215/5ebb9adcab00f82ddd33cf96/html5/thumbnails/17.jpg)
IslayTouchの使い方
•キャラクタをつくる
![Page 18: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定](https://reader034.vdocuments.mx/reader034/viewer/2022042215/5ebb9adcab00f82ddd33cf96/html5/thumbnails/18.jpg)
「消防車ゲーム」の作り方(デモ)
![Page 19: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定](https://reader034.vdocuments.mx/reader034/viewer/2022042215/5ebb9adcab00f82ddd33cf96/html5/thumbnails/19.jpg)
•キャラクタの見た目を変えてみよう
•ほのおをもっと増やしてみよう
•消防車のキャラクタを指で動かせるようにしてみよう
•シューティングゲームに改造してみよう
•カウンターを作ってゲームの得点を表示してみよう
ゲームを改造してみよう
などなど
![Page 20: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定](https://reader034.vdocuments.mx/reader034/viewer/2022042215/5ebb9adcab00f82ddd33cf96/html5/thumbnails/20.jpg)
•同じキャラクタをもっと登場させてみよう
ヒント
![Page 21: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定](https://reader034.vdocuments.mx/reader034/viewer/2022042215/5ebb9adcab00f82ddd33cf96/html5/thumbnails/21.jpg)
•指で動かせるようにしてみよう
ヒント
![Page 22: (アイラ・タッチ) - IslayTouch · •「状態遷移図」を書くことでプログ ラムを作る •状態( )と 遷移(→)の組み 合わせでゲームの動きを直観的に定](https://reader034.vdocuments.mx/reader034/viewer/2022042215/5ebb9adcab00f82ddd33cf96/html5/thumbnails/22.jpg)
•ゲームの背景を変えてみよう
ヒント