月別: 2013年3月

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
というようにする