このAki’s Labでは、闇雲に色々手を出している様でいて、結局のところ、このサイト上で只見町の景色をバックに犬キャラをインタラクティブに動かしたいというのが、大まかな構想の一つなので、”ブラウザ上で動く”という文言に惹かれて参加してみましたこちらのconnpassイベント。
JavaScriptで動く3DブラウザゲームをPlayCanvasで簡単に作る~タンクバトルゲーム /初級編~
ハンズオン中は途中で後れを取りましたが、後日やり直して出来ました^ ^
(forkして、コードは提供されていたもののコピペです。)
他のコンテンツの話題でですが、iframeというのが出てきたので、出来るのかなと思ってハンズオンで作った画面を埋め込んでみたのですが、矢印キーで上下動かすと、戦車も前後進するけど、ブラウザ全体も上下に動くので、これはやってはいけない事ですね。これがつまり単一制御点じゃないとだめということかな。
矢印キーの左右(戦車が向きを変える)とスペースキー(戦車から弾が出て、UFOに当たればUFOが消える)だけなら干渉しないで出来ますけど、本来のゲームが出来るように、下記に今回ハンズオンで作ったタンクバトルゲームのリンクを貼っておきます。スマホではできないよね、多分。
タンクバトルゲーム
<遊び方>
戦車を動かしてUFOを打ち落とします
矢印キーで上下:戦車が前後進します
矢印キーで左右:戦車が向きを変えます
スペースキー:戦車から弾が出ます
こちらの動画は、自分で遊んでみた様子です。
去年GitHubでForkを一度体験し、3DCGも少し触って、この前の週にUnityの作業画面も予習しておいたから、画面操作は何となく理解できました。
web上の作業画面でスクリプトのファイルを移動したら、フォルダのタブではリロードもしないのにファイルが移動してた。作業画面でUFO増やしたら、launchの画面でもUFO増える。リアルタイムってすごい。
以前もNode-Redか何かで思ったけど、他の人のページ?から作業する時って自分が最初にログインした画面は閉じていいのかな。去年までは通常業務で画面2つ使っている人を見て、必要かな~使いにくくないのかな~、と思っていましたけど、これ必須ですね、ないと無理。
SDKはよく聞くけど、実際にどのようにやるのか日頃からとても気になっているのもあるので、SDKの回のハンズオンもやってやってみたらまたブログに書こうと思います。
<次回参考にしたいイベントはこちら>
PlayCanvasとPhotonのJavaScript SDKを使ってマルチプレイゲームを作ろう
<あと読み>
【WebGL特集】第1回:WebGLって何?