[Prev] [Home] [Next]

第6回 インタラクティブ・コンテンツ制作Tips:応用編

担当者: 斎藤進也 (saitos[at]fc.ritsumei.ac.jp)


★本日のテーマ

本日は、先週に引き続き、インラクティブ・コンテンツを制作する上で使用頻度の高い項目をTipsとして取り上げ、解説する。

また、応用力を強化するため実践課題に取り組む。


★ENTE_FRAMEイベントを利用したオブジェクトの移動

サンプルプログラムのダウンロード  [click]


<ポイント>
●公式
1. 角速度へのx速度、y速度への変換
ax = speed * Math.cos(angle);
ay = speed * Math.sin(angle);

2. 加速度の速度への加算
vx += ax;
vy += ay;

3. ムービークリップの座標への適用
movieclip.x += vx;
movieclip.y += vy;
ソースコード

var vr:Number=0;//回転速度
var thrust:Number=0;//推進力 ファイヤー
var vx:Number=0;
var vy:Number=0;

this.uchu_sen.fire.visible=false;

stage.addEventListener(Event.ENTER_FRAME, onEF); //フレームが読み込まれ
るたびに
stage.addEventListener(KeyboardEvent.KEY_DOWN, onDown);
stage.addEventListener(KeyboardEvent.KEY_UP, onUp);

function onDown(event:KeyboardEvent):void {
 switch (event.keyCode) {
  case Keyboard.LEFT :
  vr=-5;
  break;

  case Keyboard.RIGHT :
  vr=5;
  break;

  case Keyboard.UP :
  thrust=0.2;
  this.uchu_sen.fire.visible=true;
  break;

  default :
  break;
 }
}

function onUp(event:KeyboardEvent):void {
  vr=0;
  thrust=0;
  uchu_sen.fire.visible=false;
}

function onEF(event:Event):void {

  //角加速度の計算 : x,y座標への適用
  uchu_sen.rotation+=vr;
  var angle:Number=uchu_sen.rotation*Math.PI/180;
  var ax:Number=Math.cos(angle)*thrust;
  var ay:Number=Math.sin(angle)*thrust;
  vx+=ax;
  vy+=ay;
  uchu_sen.x+=vx;
  uchu_sen.y+=vy;

  /* 画面から船がはみ出した時の処理 */
  var left:Number=0;
  var right:Number=stage.stageWidth;
  var top:Number=0;
  var bottom:Number=stage.stageHeight;

  if (uchu_sen.x-uchu_sen.width/2>right) {
    uchu_sen.x=left-uchu_sen.width/2;
  } else if (uchu_sen.x + uchu_sen.width / 2 < left) {
    uchu_sen.x=right+uchu_sen.width/2;
  }
  if (uchu_sen.y-uchu_sen.height/2>bottom) {
    uchu_sen.y=top-uchu_sen.height/2;
  } else if (uchu_sen.y < top - uchu_sen.height / 2) {
   uchu_sen.y=bottom+uchu_sen.height/2;
 }

}



★簡単なシューティングゲーム


サンプル・プログラムをダウンロード→[click]




<ポイント>
<応用>
前回の講義資料を参照し、キーが押された時、弾が敵に当たった時に音が鳴るように改造してみよう!

//フラグ 対戦中の時=1 ゲームオーバー時=0
var play_m:int = 1;

//敵のパワー設定
var score_p:int=200;

//敵のパワーの表示
this.score.text = String(score_p);

//弾の数の設定
var dan_p:int=10;

//残り弾数の表示
this.nokori.text = String(dan_p);


/**
*敵キャラの移動とゲームの終了の判断
*/
this.addEventListener(Event.ENTER_FRAME,enemy_move);
function enemy_move(Event) {

 //敵キャラの移動
 if (this.enemy.x < 450) {
  this.enemy.x += Math.floor(Math.random()* 20);
 } else {
  this.enemy.x -= Math.floor(Math.random()* 500);
 }

 //ゲーム終了判断
 //弾が無くなったら you lose
 if (dan_p < 1) {
  play_m = 0;//フラグ設定 ゲーム終了のサイン
  enemy.visible = rkt.visible  = false;//キャラを消す
  kekka.text = "YOU LOSE!";//結果表示
  score.text = nokori.text = " ";//スコアを消す
  hyouji.visible = false;//スコアを消す
 }

 //敵のパワーが無くなったら you win
 if (score_p < 1) {
  play_m = 0;//フラグ設定 ゲーム終了のサイン

  enemy.visible = rkt.visible  = false;//キャラを消す
  kekka.text = "YOU WIN!";//結果表示
  score.text = nokori.text = " ";//スコアを消す
  hyouji.visible = false;//スコアを消す
 }
}


/**
*味方(ロケット)の制御
*/

//キーボードでロケットを動かすためリスナー登録
stage.addEventListener(KeyboardEvent.KEY_DOWN,rkt_move);

function rkt_move(evt:KeyboardEvent) {

 if (play_m == 0) {
  //ゲームオーバーになった場合、イベントリスナーを削除
  stage.removeEventListener(KeyboardEvent.KEY_DOWN,rkt_move);
 }

 trace(evt.keyCode);

 if (evt.keyCode == 37) {
  //左キーが押された時
  this.rkt.x -= 15;
 }
 if (evt.keyCode == 39) {
  //右キーが押された時
  this.rkt.x += 15;
 }
 if (evt.keyCode == 32) {

  if (play_m==1) {
   //spaceが押された時
   dan_p--;//残りの弾数を1減らす
   nokori.text = String(dan_p);

   //弾をaddChildによって表示
   var dan:MovieClip = new tama();
   dan.x = this.rkt.x;
   dan.y = this.rkt.y;
   this.addChild(dan);

   //弾の動きを制御するためイベントリスナー登録
   stage.addEventListener(Event.ENTER_FRAME,dandou);
   function dandou(Event) {
    //フレームが読み込まれるたびに、弾のyを-15する
    dan.y -= 15;
    //弾と敵がぶつかったら
    if (dan.hitTestObject(enemy)==true) {
     //弾が弾ける
     dan.gotoAndPlay(2);
     //敵が顔をしかめる。
     enemy.gotoAndPlay(29);
     //敵のパワーが5減る
     score_p-=5;
     score.text = String(score_p);
    }
   }
  }
 }
}


★FFFTPを使ってサーバにアップロードしてみよう。



★実践課題(2)Flashゲーム製作企画


本講義にてこれまで習得した知識・技術を組み合わせて用い、Flashゲームを制作しなさい。


<手順>
(1)企画書の作成(全員作成する) 企画書フォーマットのダウンロード
(2)グループ内で企画を選考。
 採用する企画は基本的にグループで1つとする。
 特に希望する場合は、グループで2つまで可とする。

(3)制作作業に取り掛かる。
 自分の作業が早く終わった人は、他のメンバーの仕事を手伝うこと。
(4)ゲームをWebサーバにアップロード←完成次第

<注意点>
・企画を選考するにあたって、十分に実現可能性や役割分担について吟味すること。
・役割分担にあたって、グループメンバー全員がプログラミングをする必要はない。
・ペアプログラミングの方法論にあるように、「ドライバー」「ナビゲーター」 に分かれて二人でひとつのプログラムを完成させてもよい。
・今回は、実践的な課題であるため、授業で習っていない技術も教科書等を参考にして積極的に導入しなさい。

<企画書>
企画書は、5部(グループで4部、提出用1部)作成のこと。5名で取り組む場合は、6部。3名で取り組む場合は4部。
ここでの企画書は、グループ内で採用されたものをさす。

・企画書はプリントアウトしたものを提出する。さらに、本日の日付のフォルダ にグループ用フォルダを作成の上、一部、保存。


<共同作業をするにあたって>
・グループで知識やスキルを共有するよう努めて下さい。
・作品のコンセプトを共有するよう努め、コミュニケーションをとって下さい。
・困っているメンバーがいたら、積極的に助けて下さい。
 
[Prev] [Home] [Next]