4月第4週成果報告

cocos2D-x windows開発環境のセッティング
現在ビルドが通らない状況でストップしている。

作品制作
絵の差し替えをメインに作業。
数字をテクスチャアトラスを使用して描画、及び、中心揃えでの描画に成功。
また、動作の高速化の為、最初にUV情報を計算しておいてから数字によってUV情報を引っ張ってくるという手法を取る事とした。

UV取得クラスのソースコード(自作。使いたい人居たら勝手に持ってって貰ってOKです。)
[sourcecode language=”java”]
private static class NumbersUV {
private static float[][] uvs;

static{
uvs = new float[10][8];
for(int i=0;i<10;i++){
uvs[i] = new float[]{
(i%4)*0.25f,((float)Math.floor(i/4))*0.25f,
(i%4)*0.25f,((float)Math.floor(i/4)+1)*0.25f,
(i%4+1)*0.25f,((float)Math.floor(i/4))*0.25f,
(i%4+1)*0.25f,((float)Math.floor(i/4)+1)*0.25f,
};
}
}
public static float[] getUV(int num) {return uvs[num];}
}
[/sourcecode]

↓テクスチャアトラス用画像(Photoshopで自作。使いたい人居たら勝手に持ってって貰ってOKです。)
numbers

GINGEE触ってみる~インストール~

ゲームサイエンス学科3年**浅田**です!
今回、GINGEEの環境設定(Windows版)について書いていこうと思います。
その前にGINGEEの説明をしていきます!
***

#GINGEEって?

簡単にマルチプラットフォームのゲームを作るためのツールです!
最近リリースされたのでまだまだ情報が足りませんので、
google翻訳を使いながら解析していこうと思います!

***

#インストール方法

##1:公式サイトへ

↓の公式サイトへ移動します
[http://www.gingeegames.com/](http://)

***

##2:ダウンロードページへ

tuto1

***

##3:フリー版を選択

tuto2

***

##4:各項目を入力してダウンロード
tuto3

***

##5:ダウンロードし解凍したファイルを任意の場所に置く
tuto4

***

##6:Windowsフォルダに移動する
tuto8

***

##7:インストールを始める

tuto9
アプリケーションファイルを開く

tuto6
続行をクリック

tuto7
同意画面が出てきたら同意するをクリック

インストールが終了するとGINGEEが起動します!
以上がインストールまでの手順です!

***

初めてほとんど英語のツールを使うので試行錯誤しながら
触っています。また何か発見したりした機能については今後書いていこうと思います!

しばらくは**ActionScript3.0**を勉強しようと思います。
至らない点が多々あると思いますが、今後ともよろしくお願いいたします!

就職作品制作②

【今週の制作状況】
・タイトルの背景画像を作成
・全ての用意したテクスチャを実装
・ソースのリファクタリング
・ステージ追加
・最後のステージから次のステージへ飛ぶボタンを押すと最初のステージに戻るようにしました。

【来週の予定】
・処理を軽くする
・BGM、効果音の追加
・グラフィック面をもっと良くする

by 兵藤

コントローラーを使う

ゲームサイエンス学科3年の河辺です。

前回は開発の準備ができたので、
今回はコントローラーを作って、ページを表示しました。

コントローラーは、CakePHPの「app」フォルダの中にある「Controller」というフォルダの中に作成します。ここに拡張子が.phpのファイルを用意しておくと、自動的にそれらをコントローラーのスクリプトだと認識します。
しかし,CakePHPでは命名規則を非常に重視しているのでコントローラーのスクリプトファイルは、必ず以下のようにつけます。

##アプリケーション名Controller.php

では、実際 にコントローラーを作ってみましょう。先ほど言ったように「sample」というアプリケーションのコントローラーを作ってみます。
「Controller」フォルダの中に、「SampleController.php」というスクリプトファイルを作成してください。
「SampleController.php」に以下の記述をします[php]
<?php
App::uses(‘AppController’, ‘Controller’);

class SampleController extends AppController {

public function index() {
$this -> autoRender = false;
echo "<html><head></head><body>";
echo "<h1>サンプルページ</h1>";
echo "<p>これがサンプルのページです。</p>";
echo "</body></html>";
}

}
[/php]

記述したら保存し、Webブラウザから以下のアドレスにアクセスしてみてください。

##http://localhost/[cakephpディレクトリ]/sample/

アクセスすると、簡単なテキストのページが現れます。

HTLM5

みなさん、初めまして、そうでない人はこんにちは
吉永です。

今回はHTML5の基本のサンプルを作ってみました。

[code language=”html”]
<!DOCTYPE html>
<html long="ja">
<head>
<title>タイトル入力</title>
</head>
<body>
<p>文字入力</p>
</body>
</html>
[/code]


<!DOCTYPE html>
文章がHTML5であることを宣言します

<html>
HTMLであることを示します

<head>
ヘッダ情報を表します

<title>
タイトルをつけます

<p>
文字を表示する

HTML5を使った文字描画、画像表示

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

今回はHTML5を使って文字描画、画像表示をしたいと思います。

まず、HTMLのサンプルはこちら
[code lang=”js”]
<!DOCTYPE html>
<html lang="ja">
<head>
<title>タイトル</title>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>

[/code]
以上のコードをもとに書いていきたいと思います。

**・文字描画**
文字を描画するためには「context」と言うものが必要です。
先ほどのサンプルを
[code lang=”js”]
<head>
<meta charset="Shift-JIS">
<title>文字描画</title>
<style type="text/css">
</style>
<script type="text/javascript">

// 初期化処理
onload = function(){
//canvas要素を検出
canvas = document.getElementById(‘id_canvas’); //表示用
context = canvas.getContext(‘2d’); //コンテキストの取得
context.font = "18px ‘MS Pゴシック’";
context.fillText("文字描画テスト",10,50);
}
</script>
</head>
<body>
<canvas id="id_canvas" width="320" height="240"></canvas>
</body>
[/code]
このように変更すると「文字描画テスト」と画面に表示されます。
参考
↑が実行結果です

**・画像表示**
画像を表示するためには先ほどと同じく「context」が必要です。
サンプルを以下のほうに変更します。
[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’);
// 取得したコンテキストを使って画像ファイルを描画
var picture = new Image();
picture.onload = function() {context.drawImage(picture,0,0);};
picture.src = "pic.png";
}
</script>
</head>
<body>
<canvas id="id_canvas" width="320" height="240"></canvas>
</body>
</html>
[/code]
”pic.png”の部分が画像データになります。
実行した結果がこちら↓
画像参考

enchant.js part2 もぐらたたき

こんにちは。
ゲーム科3年の豊田です。

2回目となる今回は、現在制作中のもぐらたたきについて書いていきたいと思います。

先にゲーム画面をお見せします。
完成画面
ごちゃごちゃしていますが理由はとしては、

**20秒の制限時間があるため、出現速度が極端に遅いとスコアが毎回同じになってしまう**

ということがあり、出現速度を早めに設定しました。

次に、制作にあたって工夫・苦労した点がいくつかあるので紹介します。

・テキスト表示にモグラが被ってしまう(画像参照)
テキスト保護前
画像のように、モグラがテキスト表示に被ってしまうという状態になり、
テキストが見えなくなってしまいました。

この状態を解決するためにとった方法が、
1.透過済みの画像を作成する(フリーツールの[JTrim](http://www.forest.impress.co.jp/library/software/jtrim/)を使用)
2.テキストを表示しているエリアに透過した画像をカバーのように被せる
3.カバー用の画像とモグラであたり判定をとる(intersect)
4.当たっている場合はremoveChildでモグラを消す
という方法です。
画像で表すとこのようになります。
テキスト保護

これにより、
保護後
無事にテキストとモグラが被らないようにすることができました。

・モグラを退治した際にスコアの加算がおかしくなってしまう
bagu
こちらは現在修正中のバグです。 
上記で 制作中のもぐらたたき と書いているのはこのバグに苦戦しているからです。
ソースとしては
[javascript]
mogura.addEventListener("touchstart", function (e) {
scene.removeChild(this);
score+=1;
});
[/javascript]
この様に記述しています。
1匹退治するごとに20ずつ加算されていったり、時には17や19だったりするため、単純にほかの場所で何かがスコアに干渉しているとも考えにくく、自分でもどうしていいかよく分からないのが現状です。

今回は以上となります。
次回は上記バグの解消や、ほかの作業についての記事を書きたいと思います。

初心者が行うFuelPHP講座 part1

#FUELPHP第二弾。
##FuelPHPが動くように設定していきます。

今回想定しているシステムでは、簡易的なログイン動作と
それに伴うメール配信機能を使えるように設定してします。

#設定情報の編集#
__________________
> fuel/app/config/config.php
/**
* Localization & internationalization settings
*/
‘language’ => ‘ja’, //変更
‘language_fallback’ => ‘en’, // Default
‘locale’ => ‘ja_JP’, //変更
/**
* Internal string encoding charset
*/
‘encoding’ => ‘UTF-8’, // 変更
/**
* DateTime settings
*
* server_gmt_offset in seconds the server offset from gmt timestamp when time() is used
* default_timezone optional, if you want to change the server’s default timezone
*/
‘server_gmt_offset’ => 3600 * 9, //変更
‘default_timezone’ => ‘Asia/Tokyo’, //変更

250行目付近
‘packages’ => array(
‘auth’, // この辺についてはまたあとで
‘email’
),
_____________________________
#これで一つのシステムの準備が整いました
#次回はDBの設定についてやっていこうと思います。

add-actionを使ってみる

前回Ethnaのインストールをした奥村裕哉です。
今回はadd-actionを使ってみようと思います。
参考にしたサイトはここです。
[http://blog.as-roma.com/tanat/index.php?itemid=1395&catid=60](http://)

このページの指示通りに進めていくと、
コマンドプロンプトのところでethna add-action greetingと入力したときにエラーがでてうまくいきませんでした。理由を探ってみると前回参考にしたサイトでは、
[http://blog.as-roma.com/tanat/index.php?itemid=1392&catid=60](http://)
このページの最後のほうにのっている「パスを通す」というのをやっていませんでした。
パスを通した後、サイトのとおりに進め、アクションでアクションフォームにデータを渡すところまでできました。

カラー抜き

##はじめまして。
今回の記事が自身初のブログになります。
以後よろしくお願いします。

現在C言語でのゲーム制作に励んでいるのですが、
制作していく上で画像の透過処理に手こずってしまいました。
今回はColorKey(カラーキー) を用いた透過処理を紹介したいと思います。

ColorKeyはDirectX7まで使われた手法です。
今のDirectXにも名残として以下のような関数にもColorKey用の引数があります。
DirectX のテクスチャを作成するメソッド、
D3DCreateTextureFromFileEXA
の場合は以下のようになっています。

[c]
HRESULT D3DXCreateTextureFromFileExA(
LPDIRECT3DDEVICE8 pDevice,
LPCSTR pSrcFile,
UINT Width,
UINT Height,
UINT MipLevels,
DWORD Usage,
D3DFORMAT Format,
D3DPOOL Pool,
DWORD Filter,
DWORD MipFilter,
D3DCOLOR ColorKey,//ここがカラーキー
D3DXIMAGE_INFO* pSrcInfo,
PALETTEENTRY* pPalette,
LPDIRECT3DTEXTURE8* ppTexture
);
[/c]
ここでカラーキーの指定は下から4番目で指定となっています。

さてここでカラーキーとは何でしょうか?DirectXのヘルプにはこう書いてあります。
カラーキーとは透明となる D3DCOLOR の値。
カラーキーを無効にする場合は 0 を指定する。
ソースイメージのフォーマットとは関係なく、これは常に 32 ビットのARGBカラーである。
アルファが有意であり、通常はカラーキーを不透明にする場合はFFを指定する。
したがって、不透明な黒の場合、値は 0xFF000000 となる。

しかしカラーキーを適用しただけでは透明にはなりません。
黒く表示されてしまいます。
ではどうすればよいのでしょうか?

答えはαテストといって
基準となるα値と任意のα値を比べて描画するか否か決める処理です。

まず基準のα値をとります。
[c]
IDirect3DDevice8::SetRenderState( D3DRS_ALPHAREF, D3DFIXED );
[/c]
次にα値の比較をします。
[c]
Direct3DDevice8::SetRenderState( D3DRS_ALPHAFUNC, D3DCMPFUNC );
[/c]

第2引数のD3DCMPFUNCは基準とピクセルのα値を比較してそれを満たしてなければ透明処理を行うということです。 そして、満たしていれば描画処理を行います。

これらを実装して透過処理が完了します。

しかし、このカラーキーには最大の弱点があります。
黒を描画したいのに透明になってしまったりします。
ほかにも複数の色のカラー抜きや、半透明処理とかができません。
尚、Spriteで描画した場合はαテストをしなくても色抜きができるようです。