Facebookページのフェードをホームページに表示

前回のfacebookページとホームページを連携の準備に続いて、フィードを取得してホームページに表示する方法のメモです。

1.アクセストークンをゲット
https://developers.facebook.com/tools/accesstoken/

2.「アプリにアクセストークンを取得するアクセス許可を与えてください。」からアクセス許可をしてトークンを表示します。

3.Bodyの頭に、

window.fbAsyncInit = function() {
FB.init({
appId : ‘ここにappid’,
xfbml : true,
version : ‘v2.8’
});
//ここにapiの実行を記述
};

(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/sdk.js”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));

こんな感じ非同期でapiのjsを読み込む

4.GraphAPIのリクセストを書く


FB.api(
'/myfacebookpage/feed',
'get',
{access_token : 'ここにアクセストークン'},
function(response) {}
);

最後に注意事項としては、はじめに作ったトークンは1時間で期限切れするので、Facebook Debugerのアクセストークンタブを開いて、Extend Access Tokenボタンを押すと60日延長したトークンをゲットできるので、それをコピペすればOK

Blender でベイクする手順

Blenderは翌日には使い方を忘れるのでとりあえず手順をメモ

UV展開

1.UV展開 : モデル選択して、エディットモードにして全ポリゴンを選択し、左メニューのshading/UVs > unwrap > Smart UV Project

2.UVにテクスチャを適用:左下のメニューの3D ViewをUV/Image Editerに変更し、切り替わった画面の下の+ボタンでベイク用のテクスチャを新規に作成

Worldの設定

1.右のインスペクター内の地球のアイコンのworld設定を選択

2.Ambient OcclusionとEnvironment Lightingにチェック、適当な数値を入れる

ライトの設定

1.光源のモデルを選択して、右のインスペクター内の太陽っぽいアイコンを選択

2.Lamp > Energy で明るさを調整

3.Shadow > Samples で影の正確さ、Shadow > Soft Size で影のぼかし具合を調整

各マテリアルの設定

1.モデルを選択して、右のインスペクター内のマテリアルアイコンを選択

2.Shading > Ambient でアンビエントを設定

3D Viewでの設定

1.3D View で「N」を押して別のインスペクターを表示

2.Shading 内のmultitexture を GLSLに変更

3.Shading内のAmbient Occlusionにチェック、色を調整

ベイク

1.ベイクしたいモデルを選択

2.右のインスペクターのレンダリングアイコンを選択

3.Bake > Bake mode > Full Render

4.Bakeボタンを押す

Unity StreamingAssetsからファイルを読み出す

Streaming Assets で iOSとAndroidの違いにハマったのでメモ。

string FilePath;
#if UNITY_IPHONE
  FilePath = Application.dataPath + "/Raw/" + filename;
#else
  string fullPath = "jar:file://" + Application.dataPath + "/!/assets/" + filename;
  WWW www = new WWW (fullPath);
    while (!www.isDone) {
  }
  FilePath = Application.persistentDataPath + filename;
  File.WriteAllBytes (toPath,www.bytes);
#endif

iOSはそのままパスからファイル読み込みできるけど、Androidは一度Application.persistentDataPathにコピーしてから開かないといけない。

Google API OAuth 2.0 の認証でハマった

<script type="text/javascript">

var client_id = "クライアントID";
var scopes = 'https://www.googleapis.com/auth/drive';

function checkAuth() {
	gapi.auth.authorize(
	{
	    'client_id':client_id,
	    'scope':scopes,
	    'immediate':true
	},
	function(authResult){
		console.log(arguments);
	}); 
}
</script>
<script type="text/javascript" src="https://apis.google.com/js/client.js?onload=checkAuth"></script>

こんな感じで認証部分を記述しても何度やってもこのエラーが。。

これ位のコードだとGoogle APIの設定を疑うくらいしかないのだが、Google のdeveloper consoleとかapiとかは膨大すぎてカオスで無駄に時間を取られた。

最終的には、API Managerの中の認証情報から、0Auth 2.0 クライアント IDのwebclientのところをクリック

制限事項のURLにローカルの8888ポートを指定していないということでした。。

 

これに気づくまで数時間も時間を無駄にしてしまいました。。

ローポリー・アクションゲーム「RingNinja」リリースしました


 

半年くらいコツコツと作ってきたローポリーのゲーム「RingNinja」をようやくリリースできました。

敵を固定するリング

もともと敵を固定してそれを利用しながらクリアしていくゲームを作りたいなと漠然と考えてました。ジョジョのスティール・ボール・ランに出てくるブラックモアのスタンド「キャッチ・ザ・レインボー」で雨を固定して、ブラックモアが登っていくあたりとか、昔ファミコンでよくやったロードランナーというゲームで、床に穴を開けてそこに敵をはめて敵の上を追加するあたりとか、いろいろなもののイメージが混ざって、最終的にリングという道具を投げて敵を固定するというゲームのシステムになりました。

リングが3つの役割を兼ねることでシンプルなルールに

ゲームを開発はじめた当初は、リングはあくまで武器で、リングとは別に得点とか時間とかライフのようなものがあったのですが、こんなにいろんなパラメータ必要ないなと感じて、そのあたりごっそり減らして変わりリングに集約することにしました。

  • 武器
  • ライフ
  • ステージクリア条件

この3つをリング1つで兼ねることにしました。特にライフに関しては、ソニックのリングがヒントになってます。リングつながりでソニックを思い出して、敵に当たるとリングがバラまかれることでダメージを負わずにいるという点ですね。

脳は不思議

で作ってる時も思ったのですが、基本的に脳が昔のゲームとかシステムを記憶しているので、機能やルールを考える時に勝手に自分の経験から似たものを瞬時にとりだしてくるんだなと思いました。敵を固定するところからロードランナーって普通どうやっても思い出さなそうなんですけどね。。しかも裏技か何かで空中で敵を固定するような画面が30年ぶりくらいに頭に思い出されたというw 脳って不思議です。

そんなこんなでようやくリリースができました。ぜひ遊んでみてください。

 

ringninja

ringninja

ringninja

 

ffmpeg コマンド備忘録

連番から動画を作る

ffmpeg -r 24 -i pic0001%05d.png -vcodec libx264 -pix_fmt yuv420p -r 60 pic.mp4

画像1枚から動画を作る

ffmpeg -r 1 -i pic0001.png -vcodec libx264 -pix_fmt yuv420p -vf scale=300:-1 -r 30 pic.mp4

ffmpeg -r 1 -ipic0001.png -vcodec libx264 -pix_fmt yuv420p -vf scale=1280:-16 -r 30 pic.mp4

base.mp4とover.mp4を合成

ffmpeg -i base.mp4 -vf “movie=over.mp4[inner]; [in][inner] overlay=70:140 [out]” combined.mp4

Googleにページをすぐにインデックスさせる方法

ブログが全くインデックスされないので、Search ConsoleでURLを単位でリクエストを送ったらすぐにインデックスされました。

search console

 

Search Console > クロール > Fetch as Google

であとはページのURLを入れてくだけで、その場で処理されていきます。

送信したあとに「インデックス登録をリクエスト」ボタンが表示されますのでおすとダイアログが表示されます。

もろもろチェックしてから送信を押して終わりです。

簡単すぎてちゃんとインデックスされているのか疑いたくなります。

Zero Latency VR のVRの仕組みについて

念願のZero Latency VRを体験してきました。平日の朝から一緒にやってくれる友達もいないので1人で予約しました。

きっちり開始時間の20分前にはちゃんと受付済まして待機。が、他のプレイヤーは時間になっても現れず、あわや本当に1人で全ゾンビを相手にしないといけない状況に。。

しびれを切らしたお姉さんがゲームの説明を開始してしばらくすると、他のプレイヤー5人(中国人)が10分遅れでやってくる。どうしてもやりたいということで急遽15分遅れくらいで5人も参加するも日本語も通じずなかなかゲーム開始まで辿り着かない。。Baiduでデザイナーしてた頃の同僚中国人はみんな本当に礼儀正しかったし、真面目だったので、こういう一部のマナーの悪い中国人ばかり日本に旅行に来ているんだろうなと言い聞かせつつ、ただただ開始するのを待ってました。オペレーション大変だな、これはこれで珍しい経験できました。

で、Zero Latency VRの遊び方とかルールはネットに色々書かれてて、私も行く前に多少読んでいきました。そのあたりは割愛して、Zero Latency VRをVR開発者視点で書きます。というかやる前もやっている時もテンション上がってて全くそういう視点で見ていなかったので、思い出しながら書きます。

VRのデバイスと仕組み

まずVRのHMDはOSVR HDK2を使ってます。うちにもハッカソンでいただいたOSVRがありますが、ちゃんと動いたことがないので、OSVRがちゃんと動くということにまず驚きました。

osvr

HMDの上にPSMoveのコントローラみたいなLEDが2つついていて、これを検知してプレイヤーの見ている方向と位置を追従しています。最大6人で遊べるので、部屋の周りにこのLEDを検知するセンサーもしくはカメラが配置されているのだと思います。

銃にも2つのLEDがついていて、これがHMDと同様に銃の方向と位置を追従できるようになっています。

Zero Latency VR

でゲームをやってて気づいたのは、体と銃だけでVR内のプレイヤーの体全体をレンダリングしていて、自分から他のプレイヤーもちゃんと見える。ただあまりにゾンビの攻撃が激しく、ゆっくりそのあたりのモデルの繋がりかたとか握り方がどうなっているのかとかを見れなかったのが残念。次回はゲーム始まる前にもっとじっくり色々確認したいですね。

それとポイントは、部屋の床全面に描かれている白いグリッドです。このグリッドから床の面を検知して、ゲーム中のオブジェクトを配置したり、プレイヤーの視線の高さもこの平面を基準に追従していると思われます。それと奥行きの距離も計れるので、空間を把握するには一番やりやすい方法かもしれないです。MRに近い。

Zero Latency VR

LEDのマーカーによるプレイヤーの回転 + 位置情報と、グリッドによる床の平面情報を使ってVR空間を作ってます。

ステージのデザイン

Zero Latency VRは1階と2階をエレベーターで行き来できるステージのデザインになっています。VRなのでVR空間上は2階とはいえ実空間では1階と同じ平面上にあります。普通に考えたら1つの平面上に別のレイヤーで人が歩くと、絶対にぶつかってしまうはずなのですが、それをどうやって解決しているのかが実は一番知りたかったことでした。

やってみたらすぐに解決しました。実は1階部分と2階部分はゲーム内では同一の座標(この場合xとz座標)には存在しないようにデザインされていました。1階部分は現実空間の内側だけを使い、2階部分は現実空間の外側だけを使ってます。

space

これだと絶対にぶつかりません。単純なのですがステージのデザインでそこの問題を吸収していてよく考えられているなと思いました。逆にVR内でxとz座標が同じ複数の階を作るのは難しそうです。

OMCN Okinawa Motion Controll Networkのキックオフイベントに参加、LT登壇しました

11月13日にOMCN(Okinawa Motion Controll Network)というセンサーやデバイスを使って色々活動している人たちが沖縄にも拠点を作る ということでそのキックオフイベントに参加してきました。

イベント3日前に登壇のお誘いをいただいたので、急遽LTの準備をしたのですが、ちょうどアメリカ大統領選挙の後から激しい腹痛が始まって結局イベントの朝まで調子が悪く、最悪のコンディションの中会場の琉球大学へ向かいました。トランプのせいですね、きっと。

そんな状況だったのでLTの内容もうまくまとめられずスライドがかなりの枚数になってしまったのでそこはトークでうまくだらけないようにカバーすることにしました。

沖縄のイベントはだいたいゆるい感じで始まるのですが、本家のTMCNもゆるい感じらしくOMCNものんびりとした感じで始まりました。

PETSというプログラミングを学べるおもちゃが展示されてて、これなんかはうちの息子がプログラムを始めた時にやったようなことを、遊びながら手を動かしてできてとっかかりに良いと思いました。あとはホロレンズを体験できて、スマホでARするのとは格段に綺麗で安定していてすごかった、ただ視野角がちょっと小さくて窓を覗いているような感じでした。

 

バッカムでバイトしてる琉大生のカズマも登壇、HTC Vive向けに作ったぼっちキャッチボールとかを紹介。

自分は、春に1ヶ月ほど毎朝VRをやった時のことを思い出しつつレポートしました。1ヶ月続けていく中で起こった身体的な疲労やマインドの変化をかいつまんでご紹介しました。

他にも東京から来たTMCNの方たちのお話も面白く、何より皆さん色々な事をされててとても刺激を受けました。