Three.js 【3D描画の流れ】

**Three.jsとは?**
Web上で3Dグラフィックを実現する「WebGL」を簡易的に扱うことができるJavaScriptライブラリの一つです。

##◆ Three.jsのダウンロード
Three.jsは下記のサイトから
ダウンロードすることができます。
[Three.js](https://http://threejs.org/
)

##1.描画までの下準備
・シーンを作成(制作していく上での3D空間です)
・カメラを配置する
・ライティングの設定をする
・オブジェクトを配置する。

以下の処理などを行ったあと最後にレンダリングするという流れになります。

**2. シーンを作成
[code lang=”js”]
/**
* main
* main関数
*/
var main = function () {
// シーンの生成
var scene = new THREE.Scene();
};
[/code]

enchant.jsでゲームを作る MAP編

トライデントコンピュータ専門学校 ゲームサイエンス学科3年の森です。
私はenchant.jsをJavaScriptの勉強もかねて学んで行こうと思います。

今回はゲーム作りではなくゲームを作る際に必要になる「MAP」の作り方を説明していきます。

実際にはめちゃくちゃ簡単。
MAPはタイルのように等間隔で四角い画像を配置して作ってあります。
enchant.jsにはMAPクラスがあり、それに二次配列でどの画像を使うかを指定するだけ!
map2
↑の画像の左上から右に向かって[0,1,2,3,4…]となっている。

[code language=”javascript”]
//ブロック
var blocks = [
[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
[-1,-1, 7, 8,-1,-1,-1,-1,-1,-1],
[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
[-1,-1,-1,-1,-1,-1,10,-1,-1,-1],
[-1, 0, 0, 0, 0, 0, 0, 0, 0,-1],
[-1, 1, 1, 1, 1, 1, 1, 1, 1,-1],
];
var map = new Map(16, 16); //絵の中の1種類の四角の大きさ
map.image = game.assets["./img/map2.png"]; //使う絵
map.loadData(blocks); //ブロック(二次配列)をMAPに入れる
[/code]
と、実際に書いて見ました。 SceneにMAPを渡してシーンに描画すればOKです。
しかし、この数字の状態でMAPを作るのは大変です。脳内で数字と絵を当てはめて…とか

なので、enchant.js公式で用意されているマップエディタを使います。
公式の enchantMapEditor は、[GitHub](https://github.com/wise9/enchantMapEditor) よりダウンロードできます。
右下の「Download ZIP」をクリックしてダウンロードし、その中に「mapeditor.html」というファイルがあると思うのでブラウザで立ち上げてください。

立ち上げると[横幅][縦幅][画像][マップ拡張を有効にする]の4個の項目があると思います。
横幅、縦幅、は言葉の通り。MAPの大きさです。
画像は[RPG][2D Scroll]のどちらかを選びます。今回は[2D Scroll]
拡張のチェックはRPGの時は問題ありませんは、2D Scrollの時はバグるのでチェックを外しておきます。

あとは右側の絵の中から使用したい絵を選び左の枠内に配置していくだけです。
ちなみに、「-1」は何も表示しない。の意味です。

MAPが完成したら右下の「コード生成」をクリックし、出てきた配列をコピペして使用する。
注意:ところどころ画像の数字とエディタで作った配列の数字が違う場合があります。

以上でenchant.jsでのMAPの作り方の説明を終わります。

html5

今回は円と四角のあたり判定を調べました。

これがソースです

<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
    	// ここがプログラム
    	var canvas;
    	var ctx;
    	
    	var x = 250;//円のx軸
    	var y = 250;//円のy軸
    	var bool = 10;//円の大きさ
    	
    	
		var rightDown = false;
		var upDown = false;
		var leftDown = false;
		var downDown = false;
		
		var block_x = 225;//四角のx軸
		var block_y = 175;//四角のy軸
		var block_w = 50;//四角の幅
		var block_h = 50;//四角の高さ
///////////////////////////////////////
function onKeyDown(evt) {
	if (evt.keyCode == 39)
		rightDown = true;
	else if (evt.keyCode == 37)
		leftDown = true;
	
	else if (evt.keyCode == 38)
		upDown = true;
	else if (evt.keyCode == 40)
		downDown = true;
		

}

function onKeyUp(evt) {
	if (evt.keyCode == 39)
		rightDown = false;
	else if (evt.keyCode == 37)
		leftDown = false;
		
	else if (evt.keyCode == 38)
		upDown = false;
	else if (evt.keyCode == 40)
		downDown = false;
		
}

document.onkeydown = onKeyDown;
document.onkeyup = onKeyUp;

//////////////////////////////////////
		
      	function draw(){
        	canvas = document.getElementById('tutorial');
        	ctx = canvas.getContext('2d');
        	if (canvas.getContext){
          		
          		setInterval('gameLoop()', 16);
          		
        	}
      	}

		/**
		 * ゲームループ
		 */
		function gameLoop() {
			//initContext(canvas,ctx);
			
			ctx.clearRect(0,0,canvas.width,canvas.height);
			
			ctx.font = "18px 'MS Pゴシック'";
    		ctx.fillText("X:" + x ,10,75);//円のx軸表示
    		ctx.fillText("Y:" + y ,10,100);//円のy軸表示
			
			//四角の表示
			ctx.strokeRect (block_x, block_y, block_w, block_h);
			
			//円の表示
			ctx.beginPath();
        	ctx.arc(x,y,bool , 0,360*Math.PI/180,true);
        	ctx.stroke();
        		
//------------------------円と四角のあたり判定-------------------------

	//円の中心が四角から見て上中下の時
	if(( block_x < x && x < block_x+block_w )&&( block_y-bool < y && y < block_y+block_h+bool ))
	{
		ctx.fillText("上中下当たり" ,10,225);
		
	}
	 
	//円の中心が四角から見て左中右の時
	if(( block_x-bool < x && x < block_x+block_w+bool )&&( block_y < y && y < block_y+block_h ))
	{
		ctx.fillText("左中右当たり" ,10,250);
	}
	
	//円の中心が四角から見て斜め上下の時
	if(( (block_x-x)*(block_x-x)                 + (block_y-y)*(block_y-y) < bool*bool ) ||
	( (block_x+block_w-x)*(block_x+block_w-x) + (block_y-y)*(block_y-y) < bool*bool ) ||
	( (block_x-x)*(block_x-x)                 + (block_y+block_h-y)*(block_y+block_h-y) < bool*bool ) ||
	( (block_x+block_w-x)*(block_x+block_w-x) + (block_y+block_h-y)*(block_y+block_h-y) < bool*bool ))
	{
		ctx.fillText("斜め上下当たり" ,10,275);
	}

//---------------------------------------------------------------------

  	//円移動
    if(rightDown == true){
		x += 1;
	}
	if(leftDown == true){
		x -= 1;
	}
	
 	else if(upDown == true){
		y -= 1;
	}
	else if(downDown == true){
		y += 1;
 	}
 
 
        	
		}
    </script>
    
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="500" height="500"></canvas>
  </body>
</html>

となります

	//円の中心が四角から見て上中下の時
	if(( block_x < x && x < block_x+block_w )&&( block_y-bool < y && y < block_y+block_h+bool ))
	{
		ctx.fillText("上中下当たり" ,10,225);
		
	}
	 
	//円の中心が四角から見て左中右の時
	if(( block_x-bool < x && x < block_x+block_w+bool )&&( block_y < y && y < block_y+block_h ))
	{
		ctx.fillText("左中右当たり" ,10,250);
	}
	
	//円の中心が四角から見て斜め上下の時
	if(( (block_x-x)*(block_x-x)                 + (block_y-y)*(block_y-y) < bool*bool ) ||
	( (block_x+block_w-x)*(block_x+block_w-x) + (block_y-y)*(block_y-y) < bool*bool ) ||
	( (block_x-x)*(block_x-x)                 + (block_y+block_h-y)*(block_y+block_h-y) < bool*bool ) ||
	( (block_x+block_w-x)*(block_x+block_w-x) + (block_y+block_h-y)*(block_y+block_h-y) < bool*bool ))
	{
		ctx.fillText("斜め上下当たり" ,10,275);
	}

上のif文は上中下の時の判定です
真ん中のif文は左中右の時の判定です
下のif文は上下ふちの時の判定です

ATAN2(アークタンジェント)

今回は**ATAN2**について書いていこうと思います。
ATAN2とはなにか・・・?

指定された x-y 座標のアークタンジェントを返します。
アークタンジェントとは、x 軸から、原点 0 と x 座標、y 座標で表される点を結んだ直線までの角度のことです。
戻り値の角度は、-PI 〜 PI (ただし -PI を除く) の範囲のラジアンとなります。

と書いてありました。
詳しくはコチラのページを参照して下さい。
[http://office.microsoft.com/ja-jp/excel-help/HP005208991.aspx](http://)

簡単にいうと角度を取得することができます。
C言語での書き方はこうです。

[c]double atan2(double y,double x);[/c]
ではゲームではどのように使えるのでしょうか?

例えば、プレイヤーが入力された方向へ360度回転することができます。
ほかにもシューティングで使われるホーミングミサイルなどにも使うことができます。

ではサンプルプログラムを見てみましょう。
[c]// プレイヤーの向きを360度変える
float angle = atan2(player.vecY,player.vecX);
player.rotz = angle;[/c]

こちらのソースではプレイヤーのベクトルから向きを取得して
向いた方向へ回転させています。

但しこの関数で帰ってくる値はラジアン(radian)なので
角度(degree)に変換する場合は注意が必要です。

変換の式も載せておきます。

角度(degree)からラジアン(radian)に変換
[c]double radian = degree * PI / 180.0;[/c]

ラジアン(radian)から角度(degree)に変換
[c]double degree = radian * 180.0 / PI;[/c]

爆速!?ロン毛のプログラミング講座 第三回「DrawCall回数の削減」

おはようございます。
色々あって更新が遅れ、申し訳ありません。
乾です!!

今回もはじまりました
#「爆速!?ロン毛のプログラミング講座」
***
この講座は粒子法を用いゲーム内に水の動きを入れていく過程で避けて通れない「処理高速化」について解説していく講座です。
[第一回](http://www.trident-game.com/?p=2274)
***

今回は**「DrawCall回数の削減」**について解説していきます。

##DrawCallとは?##
描画呼び出し回数のことです。
これが多いほど負荷が増大しフレームレートの低下を招いてしまいます。
以前の私は粒子一粒ごとに描画を行っていました。
今回作成したゲームでは150粒出しているので150回も描画していたことになります、恐ろしいですね。

そこで高速化のためにバッチ処理を行いました。
##「バッチ処理」
一定量データを集め、まとめて処理を行う処理方式です。

![Alt Text](http://www.trident-game.com/wordpress/wp-content/uploads/2014/05/beforeDrawCall.png)

![Alt Text](http://www.trident-game.com/wordpress/wp-content/uploads/2014/05/afterDrawCall.png)
このように変更しました。
水だけでなくパーティクルの処理にも使用しています。

次回はキャッシュについて書きたいと思います。
それでは!!

柔らかい球体同士の当たり判定

今回は柔らかい球体同士の当たり判定について書こうと思います。

当たっているオブジェクトは球と球なので当たり判定自体は簡単ですね!
まず円と円の当たり判定をして当たっていたら2つの球の中心座標(中間点)を求めます。
3

そして、二つの球の中心を結ぶ線に垂直な中間点を通る線を求めます。
4

あとはこの線に対して2つに球に凹ませる処理をさせます。
これで柔らかい球と球の当たり判定は完成です。
ただしこの方法では同じ大きさの球どうしでないとうまく跳ね返りません、大きさが違う球でこの処理をすると、小さい球が一方的に大きい球を吹き飛ばしてしまいます。またその処理も考えていこうと思います。

cocos2d-x 3.0 アクションとupdate関数

トライデントコンピュータ専門学校
ゲームサイエンス学科3年の福島です。

今回はアクションとupdate関数の使い方について書いていきたいと思います。

アクションとは、オブジェクトの動きの部分です。
すべてのオブジェクトに同じ動きをさせたい時や簡単な動きをさせたい時などに使用します。

##アクションの使い方

1.アクションの作成
    ↓
2.アクションの実装

これが大まかな流れになっています。

この処理を実際にプログラミングしていきます。

##1.アクションの作成

[cpp]
// フェードアクション生成
// 第一引数はアクションの時間、第二引数はアルファ値
auto action = FadeTo::create(1.0f, 0);

// 複数のアクションを同時に実行したい場合
// 可変長引数(アクション1, アクション2,……NULL)
// 回転しながら透過していく
auto spawn = Spawn::create(rot_action, fade_action, NULL);

// アクションを順番に実行したい場合
// 可変長引数(アクション1, アクション2,……NULL)
// 回転した後に透過する
auto sequence = Sequence::create(rot_action, fade_action,NULL);
[/cpp]

##2.アクションの実装

[cpp]
// アクションさせるスプライトの作成
auto sprite = Sprite::create("texture.png");

// スプライトにアクションの実装
// cocos2d-xの方で実行される
sprite->runAction(action);

[/cpp]

上手くいくとアクションが実行されます。

次は自分でUpdateを記述する方法を説明します。

##update関数の使い方

1.update関数の定義
    ↓
2.update関数の実装

これが大まかな流れになっています。

この処理を実際にプログラミングしていきます。

##1.update関数の定義

[cpp]
// シーンのヘッダーファイルに定義
void update(float delta);
[/cpp]

##2.update関数の実装

[cpp]
// init()内に記入
this->scheduleUpdate();

// update関数の定義
void TestScene::update(float delta) {
// 処理の記入
}
[/cpp]

これだけでupdate関数がマイフレーム実行されます。

次回はシーンの切り替えについて書いていきたいと思います。

ユニティちゃんゲームジャム

2014年春に正式リリースされたユニティ・テクノロジーズ・ジャパンのマスコットキャラクターであり3DCGモデルでもある「ユニティちゃん」を使った30時間Game Jamになります。

日時: 2014/6/14 – 6/15[ 土 ] – [ 日 ] 9:00 – 17:00 JST
会場: 名古屋情報メディア専門学校(名古屋・六番町会場)

詳しくは[こちら](http://unity-chan.com/events/ucgj2014/)

【岐阜】第1回iPhoneアプリ開発勉強会

岐阜(名古屋)近郊出身iPhoneアプリ開発のトップランナーの皆さんの話を岐阜で聞けるチャンス!

日時 :2014/05/24 13:30 to 17:00
定員 :40 人
会場 :センタービル ソフトピアジャパンセンター 中会議室3 (岐阜県大垣市加賀野4丁目1番地7)
URL :http://www.softopia.info/nyukyo/access.html
管理者 :名古屋iPhone開発者勉強会 名古屋iPhone開発者勉強会

詳細は[こちら](http://atnd.org/events/50235)

HTML5で図形の描画

ゲームサイエンス学科の山本です。

今回は図形の描画をしたいと思います。

[第2回](http://www.trident-game.com/?p=2679)のサンプルコードを基に書いていきます。

**・四角形の描画**
四角形を描画するにはcanvasが必要です。
四角形の描画は大きく分けると2種類あります。
・fillRect関数
・strokeRect関数

fillRect関数について
context.fillRect(x, y, w, h);
x: x座標 y: y座標
w: 幅 h: 高さ

context.strokeRect(x, y, w, h);
x: x座標 y: y座標
w: 幅 h: 高さ

一見同じように見えますがfillRect関数は図形を塗りつぶします。
一方strokeRect関数は図形を塗りつぶしません。

context.fillStyle = “#000000”;
context.strokeStyle = “#000000″;
上の関数で図形の色を指定することができます。

サンプルコードはこちら
[code lang=”js”]
<!DOCTYPE html>
<html lang="ja">
<head>
<title>図形の描画</title>
<style type="text/css">
</style>
<script type="text/javascript">
onload = function(){
//canvas要素を検出
canvas = document.getElementById(‘id_canvas’);
context = canvas.getContext(‘2d’);

// 取得したコンテキストを使って図形を描画
context.fillStyle = "#ff0000"; //色の指定
context.fillRect(30,30,90,90); //四角形の描画

context.fillStyle = "#00ff00"; //色の指定
context.fillRect(120,30,90,90); //四角形の描画
}
</script>
</head>
<body>
<canvas id="id_canvas" width="320" height="240"></canvas>
</body>
</html>
[/code]
上のソースの実行結果がこちら

無題

**・円の描画**
円も四角形と同じように描画することができます。
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, clock rotation);
context.stroke();

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, clock rotation);
context.fill();

arc関数について
arc(x, y, radius, startAngle, endAngle, clock rotation);
x: x座標 y: y座標
radius: 半径 startAngle: 描画開始地点 endAngle: 描画終了地点
clock rotation: 時計回りか反時計回りに描画するか

stroke関数は中を塗りつぶしません。
fill関数は塗りつぶします。

サンプルコードはこちら
[code lang=”js”]
<!DOCTYPE html>
<html lang="ja">
<head>
<title>円の描画</title>
<style type="text/css">
</style>
<script type="text/javascript">
onload = function(){
//canvas要素を検出
canvas = document.getElementById(‘id_canvas’);
context = canvas.getContext(‘2d’);

// 取得したコンテキストを使って図形を描画
context.beginPath();
context.arc(70, 70, 60, 0, Math.PI*2, false);
context.stroke(); //円弧の描画

context.beginPath();
context.arc(170, 170, 60, 0, Math.PI*2, false);
context.fillStyle = "#ff0000"; //色の指定
context.fill(); //円の描画
}
</script>
</head>
<body>
<canvas id="id_canvas" width="320" height="240"></canvas>
</body>
</html>
[/code]

上のソースの実行結果がこちら
円の描画