PDF-10

2009年度 デザイン情報学科 情報処理III
7月の課題
インタラクティブなゲームの実装
ボールの動作
マウスによるラケットの動作
ブロックの生成
Step 10
「ブロック崩し」の部品
ボール
直径10pixelの円
ラケット
横60pixel × 縦10pixel，マウスにより左右に移動
ブロック
レポートはA4用紙に作成
書式は自由（ただし5月・6月の課題に準じる）
書式は自由（ただし5月
6月の課題に準じる）
締切：7/24（金） 午後4時00分
場所：1階レポート提出ボックス
2009年度デザイン情報学科 情報処理III
状態遷移
横50pixel × 縦20pixel，28個（7個×4段）
壁（フィールド）
横400pixel × 縦600pixel
2009年度デザイン情報学科 情報処理III
状態遷移図
スタート画面
「ブロック崩し」の表示
クリックされたらゲーム画面へ
ゲーム画面
ゲーム本体の実行
すべてのブロックがなくなればクリア画面へ
3回失敗すればゲームオーバー画面へ
クリア画面
クリア画面
スタート画面
「Clear」の表示
クリックされたらスタ ト画面へ
クリックされたらスタート画面へ
ゲーム画面
ゲームオーバー画面
ゲ
オ
画面
ゲームオーバー画面
「Game Over」の表示
クリックされたらスタート画面へ
2009年度デザイン情報学科 情報処理III
インタラクティブなゲーム
2009年度デザイン情報学科 情報処理III
1
2009年度 デザイン情報学科 情報処理III
ゲーム画面
Step 10
ゲーム画面内の状態遷移図
初期設定
「ブロック」の配置
ゲーム本体
「ボール」の移動
「ラケット」の移動
「ラケット」と「ボール」の当たり判定
「ブ ク と「ボ ル の当たり判定
「ブロック」と「ボール」の当たり判定
ゲーム終了判定
クリア画面へ
すべてのブロックが
なくなったら
初期設定
ゲーム本体
残りのボール
がなくなったら
ゲーム本体を繰り返す
ゲームオーバー画面へ
2009年度デザイン情報学科 情報処理III
Flashによる実装
Flash
による実装
状態→フレーム
状態遷移→フレームの移動
モジュール
一つ一つのフレーム
「ボール」
「ラケット」
「ブロック」
ブ ック」
2009年度デザイン情報学科 情報処理III
ゲーム画面を作る
横 400pixel
縦 600pixel
p
フレームレート 60fps
サブモジュール
「ボール」や「ラケット」は移動や跳ね返りなどのサブ
モジュールを持つ
2009年度デザイン情報学科 情報処理III
インタラクティブなゲーム
2009年度デザイン情報学科 情報処理III
2
2009年度 デザイン情報学科 情報処理III
ゲーム画面を作る
レイヤーを2つ用意
上：「ActionScript」
下：「Main」
フレームを3つ用意
「ActionScript」レイヤー
では、独立した3つの
キーフレーム
キ フレ ム
「Main」レイヤーでは、
連続した3つのフレーム
2009年度デザイン情報学科 情報処理III
ボールを作る
「Main」レイヤーに直径10pixelの円を配置
「シンボルに変換」する
変換
名前：「Ball」
タイプ：ムービークリップ
基準点：中央
配置されたムービークリップに名前を付ける
名前：「ball」
ActionScriptで参照される名前
2009年度デザイン情報学科 情報処理III
インタラクティブなゲーム
Step 10
キーフレームとフレーム
キーフレーム
アイテムを配置できる
ActionScriptを記述できる
フレーム
キーフレームとキーフレームをつなぐ
ただ再生されるだけ
2009年度デザイン情報学科 情報処理III
移動するボール
ボールが持つプロパティの初期設定
移動方向（dx, dy）
スピード（speed）
移動位置を計算する関数move()
var dx = 1;
var dy = 1;
var speed = 3;
function move() {
this._x += speed * dx;
this._y += speed * dy;
}
2009年度デザイン情報学科 情報処理III
3
2009年度 デザイン情報学科 情報処理III
Step 10
ボールを動かす
右の壁に当たると跳ね返るボール
ActionScriptレイヤー
右の壁に当たる＝ボールのx座標が画面の幅
より大きくなる
フレーム1
移動のｘ軸方向を反転させる
ボールのｘ座標を壁と同じところへ
何もしない
フレーム2
ballのmove()関数の呼出し
ball.move();
フレーム3
フレーム2へ戻る
gotoAndPlay(_currentFrame – 1);
function move() {
this._x += speed * dx;
this._y += speed * dy;
if (this._x > Stage.width) {
dx *= -1;
this._x = Stage.width;
}
}
画面の幅
（高さはStage.height）
2009年度デザイン情報学科 情報処理III
2009年度デザイン情報学科 情報処理III
ボールを壁にめり込ませない
ボールは単なる点ではなく大きさを持っている
大きさを考慮した当たり判定
ボールの半径（幅の半分）を調整
function move() {
this._x += speed * dx;
this._y += speed * dy;
ボール（この部品）の幅
（高さはthis._height）
if (this._x > Stage.width – this._width / 2) {
dx *= -1;
this._x = Stage.width – this._width / 2;
}
}
2009年度デザイン情報学科 情報処理III
インタラクティブなゲーム
4