カテゴリー: 未分類

Social Plugins
Social Pluginsは、Amazonのアフィリエイトみたいに
タグをコピペするだけて
ブログとかに配置できるもの
Facebookなら
http://developers.facebook.com/docs/plugins
で作成可能
ここで作成できるのは
いいねボタンとか
コメントを書き込むことができるコメント欄など

Graph APIでオブジェクトへアクセス
ユーザー情報を取得するURLは
http://graph.facebook.com/ユーザーID
さらに、友達一覧を表示するなら
http://graph.facebook.com/ユーザーID/friends
また、FQLというSQLのようなモノも使える
自分の友達のID一覧を出すなら
select uid2 from friend where uid1 = me()

Facebookアプリおさらい
まず、canvas型のアプリ
これは、Webアプリで、Facebookのインラインフレーム
iframeの中に表示される
このインラインフレームの中がcanvas
HTML5のCanvasと同じ感覚
アプリ開発は
HTMLを返すWebシステムを作って
そのURLをFacebookへ設定
アプリのURLもFacebookに依存するので
http://apps.facebook.com/アプリのURL
となる
ちなみに、公開していないサーバー
つまり自宅サーバーやXAMPPとかでやると
フレームがでない
次に、独立型アプリ
これは、Facebookアカウントを使い
ログイン、ウォールへの書き出しなどができる
このタイプは、Twitterなどとも連携可能
なので、マッシュアップするなら
このタイプ
そして、ネイティブアプリ
これは、SDKを使って、スマートフォン専用アプリにする
AndroidとかiPhoneのアプリが作れる人向け
タブ型アプリ
これほ、Facebookページに組み込むタイプ
canvas型と同様に、インラインフレームの中に作る

半透明のメッセージボックス作成
RPGとかでは、看板をみたり
街の人と話したとき
メッセージボックスに表示される
これは、画面にオーバーラップさせれば実現できる
メインのダンジョンや街のマップは
canvasで作成しておいて
メッセージの描画はdivタグを使う
そして、メッセージは
CSSを使い、絶対座標で描画する
絶対座標にするなら
position:absolute
を指定するのを忘れずに
吹き出しを半透明にするなら
opacity:0.9
にすればいい
opacityは透明度の設定になる
divで設定したのは
メッセージをinnerHTMLで表示したり
imgで画像にしたりできるから
いろいろできるようになれば
videoで動画再生とか
audioで歌うとかできるようになるかもしれない

Canvasの重ね合わせ
よくある、ダンジョンで
キャラクターが歩いていて
背景画像もその周りにあるというもの
これは、2つのCanvasの重ね合わせで実現てきる
これには、ダンジョンマップ描画のCanvasと
キャラクター画像描画のCanvas
の2つを作成
1つのCanvasに対して
drawImage()で
複数の画像を重ねて描画できるけど
ダンジョンマップの場合
キャラクター画像と
ダンジョンマップの描画の
タイミングが違うので
Canvasを分けている
Canvasの重ね合わせには
CSSを使う
ポイントとしては
各Canvasに対して
position: absolute
を指定すること
これを指定することで
上から順の要素の配置ではなく
leftとtopを使った絶対座標で表示する
ようになる
通常のHTMLでは
要素を順に配置するけと
Canvasの重ね合わせをするには
絶対座標で自由に配置することもある

マップチップを、まとめるメリット
ダンジョンマップを作るとき
各画像を用意すると
読みこみに、時間がかかるため
合成して一つの画像にする
これなら
通信に時間がかからない
マップだけじゃなく
キャラクター画像もまとめることができる

トップビューの迷路ゲーム
RPGを作るには
数字を利用して迷路やダンジョンマップを作成
マップの行数 MAP_ROWS
マップの列数 MAP_COLS
を作成し、その大きさに従い作成する
マップ画面は、チップを並べるようにつくる
このチップは番号で管理
0 通路
1 壁
2 扉
3 扉
4 草原
5 ゴール
というように指定し
配列変数にダンジョンマップを格納
mapData=[
1,1,1,1,1,1,
0,0,0,0,0,0,
];
というように作成する
数値はあとで画像データとリンクさせる
また、ダンジョンマップのすべてを画面に描画せず
スクロールして、普段は一部だけ出るようになっている
キャラクターが１マス移動したら
移動方向へ、そのぶんだけスクロールする
という仕組み

Javascriptでaudioコントロール
audioタグは、Javascriptでの制御が可能
document.getElementById()
でDOM要素を取得し
コントロールに対して
play()を使い再生することができる
Javascriptで使えるメソッドは
play()
再生開始
pause()
再生停止
ソースにすると
<audio id=”effect”>
<source src=”effect.mp3″>
<source src=”effect.wav”>
</audio>
なら
var obj = document.getElementById(“effect”);
obj.play();
というようになる

HTML5 audioて音楽再生
HTML5 では、audioタグで
音楽再生ができる
ただし、動画再生と同じく音楽再生も
対応フォーマットの問題があるので注意
これも、動画と同じ対処で
sourceタグで複数のフォーマットを用意することになる
書式にすると
<audio controls>
<source src=”音声.mp3″/>
<source src=”音声.ogg” />
</audio>
ちなみに、Android 2.2以下は
audio非対応なので注意
audioタグの属性は、videoタグと似ている
以下はその属性のメモ
src
音楽ファイルのURL
loop
ループ再生の指定
controls
再生のためのインターフェースを表示
autoplay
自動で音楽再生
preload
auto指定で、ファイルの先読みこみをする
これも、スマートフォンでは
autoplayとpreloadは非対応
スマートフォン対応フォーマットについては
iOSなら
Mp3
AAC
WAV
Androidなら
MP3
OGG
Vorbis
となる
あと、注意すべきところは
動画再生と同じく
WebサーバーでのMIME Typeの指定
これも、.htaccessで
指定を追加するようにすればok
AddType audio/mp3 .mp3
というようにする

HTML videoタグの使い方
videoタグの書式は
<video src=”動画のURL” controls>
画像に似てるけど
フォーマット関係により
ブラウザーで再生できないことがある
このため
videoタグの内側に異なるフォーマットの動画ファイルを指定して対処する
この場合の書式は
<video controls>
<source src=”動画のURL.3gp”/>
<source src=”動画のURL.mp4″ />
</video>
videoタグの属性は
src
ファイルのURLの指定
loop
ループ再生の指定
controls
再生のためのインターフェースを表示
poster
動画の再生準備が整うまでの間に表示しておく画像のURL
autoplay
自動で再生開始
preload
autoを指定すれば、ファイルの先読みこみをする
たた、スマートフォンの場合たと
autoplayとpreloadは無効化されるので注意
あと、注意すべきところは
Webサーバーでの
MIME Typeの指定
Webサーバーによっては
動画のMIME Typeが指定されていないため
動画再生できないことがある
このため
.htaccessで
MIME typeを指定する
以下はその例
#MIME Type指定
AddType video/mp4 .mp4
ちなみに、スマートフォンでの対応フォーマットは
iOSは
MPEG4/H.264
Androidは
MPEG4/H.264
OGG/Theora/WebM/VP8
このため、スマートフォン対応させるなら
MPEG4/H.264形式を入れておく
スマートフォンでの注意すべきところはまだあり
動画をゲームに使うときには
videoタグで動画再生しようとすると
全画面で動画再生になるので
画面の一部へ動画を埋め込んだり
Javascriptで細かい制御かできないということ