2012度 インタラクティブ映像制作実習II(1)
[Prev] [Home] [Next]

第5回 インタラクティブ・コンテンツ制作Tips:基礎編

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


★本日のテーマ

本日は、インタラクティブ・コンテンツを制作する上で、特に使用頻度の高いテクニックを取り上げ解説する。

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

★インタラクティブ・コンテンツ作成テクニックス


★ startDrag メソッド / stopDragメソッド

素材ファイル →[download]

startDrag メソッド / stopDragメソッドを用いることで、任意のオブジェクトをドラッグして移動されることが可能。 

MovieClip.startDrag(); オブジェクトのドラッグを開始する。

MovieClip.stopDrag(); オブジェクトのドラッグを終了する。



/*トマト*/
tomato_a.addEventListener(MouseEvent.MOUSE_DOWN,drag_tomato_a);
tomato_a.addEventListener(MouseEvent.MOUSE_UP,drop_tomato_a);

function drag_tomato_a(e:MouseEvent){
  //ドラッグ開始
   tomato_a.startDrag();
}

function drop_tomato_a(e:MouseEvent){
  //ドラッグ終了
  tomato_a.stopDrag();
}

/* ピーマン */
p_man_a.addEventListener(MouseEvent.MOUSE_DOWN,drag_p_man);
p_man_a.addEventListener(MouseEvent.MOUSE_UP,drop_p_man);

function drag_p_man(e:MouseEvent){
  //ドラッグ開始
  p_man_a.startDrag();
}

function drop_p_man(e:MouseEvent){
  //ドラッグ終了
  p_man_a.stopDrag();
}



★numChildrenプロパティ、setChildIndexメソッド : 重なり順のコントロール
→ドラッグした時に、重なりが最前面になるようにする。

サンプルファイル→ [download]

DisplayObjectContainer.numChildren 表示オブジェクトコンテナ内の子オブジェクトの数を返す。

DisplayObjectContainer.setChildIndex(オブ ジェクト ,インデックス); オブジェクトに任意のインデックス位置(順番)を割り当てる。


/* トマト */
tomato_a.addEventListener(MouseEvent.MOUSE_DOWN,drag_tomato_a);
tomato_a.addEventListener(MouseEvent.MOUSE_UP,drop_tomato_a);

function drag_tomato_a(e:MouseEvent){
  //ドラッグ開始
  tomato_a.startDrag();
	   
 
  var myContainer:DisplayObjectContainer = tomato_a.root as DisplayObjectContainer;
  var lastIndex:int = myContainer.numChildren-1; //1引くのは、index番号は0から始まるため
  myContainer.setChildIndex(tomato_a,lastIndex); 
}

function drop_tomato_a(e:MouseEvent){
 //ドラッグ終了
 tomato_a.stopDrag();
}

/* ピーマン */
p_man_a.addEventListener(MouseEvent.MOUSE_DOWN,drag_p_man);
p_man_a.addEventListener(MouseEvent.MOUSE_UP,drop_p_man);

function drag_p_man(e:MouseEvent){
  var myContainer_b:DisplayObjectContainer = p_man_a.root as DisplayObjectContainer;
  var lastIndex_b:int = myContainer_b.numChildren-1;
  myContainer_b.setChildIndex(p_man_a,lastIndex_b);
  //ドラッグ開始
  p_man_a.startDrag();
}

function drop_p_man(e:MouseEvent){
  //ドラッグ終了
  p_man_a.stopDrag();
}

			 

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

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


<ポイント>
  • 「←」「→」キー宇宙船が回転動。 →→→ Keyboardイベント、x,yプロパティへの値代入
  • 「↑」キーで火を噴射。Keyboardイベント。→→火の表示/非表示は、.visibleプロパティをture/faulseの切り替えで決める。
  • 火の噴射は推進力を生み宇宙船は前進する。→→→ ENTER_FRAMEイベント
  • 角加速度の適用:力と方向をx成分とy成分に分けて適用する。

●公式
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;

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;
  .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]




<ポイント>
  • 「←」「→」キーで移動。 →→→ Keyboardイベント、x,yプロパティへの値代入
  • 「space」キーで弾を発射。 →→→ ENTER_FRAMEイベント addChildメソッド
  • 弾が敵に当たったかを判断。 →→→ hitTestObjectメソッド
  • 弾が当たったら、弾がはじけ、敵が顔をしかめる。 →→→ gotoAndPlay、gotoAndStopメソッド
  • 弾の残り数、敵のパワーの表示 →→→ テキストフィールドへの値代入、String型へのキャスト(型変換)

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

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

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

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

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

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


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

 //敵キャラの移動
 if (enemy.x < 450) {
  enemy.x += Math.floor(Math.random()* 20);
 } else {
  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) {
  //左キーが押された時
  rkt.x -= 15;
 }
 if (evt.keyCode == 39) {
  //右キーが押された時
  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 = rkt.x;
   dan.y = rkt.y;
   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);
    }
   }
  }
 }
}

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


本講義にてこれまで習得した知識・技術を組み合わせて用い、簡単なFlashゲームを制作しなさい。 ゲームの種類(シューティング、アクション、パズル、クイズ等)は、自由とする。

<手順>
(1)企画書の作成(全員作成する) →企画書フォーマットのダウンロード
(2)グループ内で企画を選考。
 採用する企画は基本的にグループで1つとする。
 特に希望する場合は、グループで2つまで可とする。
 →採用された企画書を本日提出(次回授業終了時まで受け付ける)
(3)制作作業に取り掛かる。
 自分の作業が早く終わった人は、他のメンバーの仕事を手伝うこと。

<要点・注意点>
・企画を選考するにあたって、十分に実現可能性や役割分担について吟味すること。
・役割分担にあたって、グループメンバー全員がプログラミングをする必要はない。
・今回は、実践的な課題であるため、授業で習っていない技術も教科書等を参考にして積極的に導入しなさい。



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

・本日の日付のフォルダにグループ用フォルダを作成の上、一部、保存。


<共同作業をするにあたって>
・グループで知識やスキルを共有するよう努めて下さい。
・困っているメンバーがいたら、積極的に助けて下さい。
 

<メンバー数が少なくて困っている班>
・ボーナス得点あり
・実践課題に着手するまえに、教員と相談


[Prev] [Home] [Next]