はじめに
この記事は「fukuoka.ex Elixir／Phoenix Advent Calendar 2021」の21日目です。
昨日は@iyanayatudazeさんの「"phx.server"コマンドの実装を追い掛ける」でした。
LiveViewのJavaScript interoperabilityを使ったお手軽オンラインゲーム開発をやってみます。
ブラウザに表示するゲーム部分はbabylon.jsのサンプルを使用します。
動画では少しカクカクしていますが、実際には滑らかに動作しています。
開発環境
| PC | Mac Book Pro (Retina, 13-inch, Late 2013) |
|---|---|
| OS | Catalina |
| Memory | 8GB |
| 言語 | elixir v1.11 |
| FW | phoenix1.5 |
| Client | babylon.js v4.2 |
プロジェクト作成
mix phx.new --live mmo_lv
LiveViewハンドラの作成
ブラウザ上のキー入力をpushevent経由で取得/処理する部分を作成します。
lib/mmo_lv_web/live/page_live.ex
defmodule MmoLvWeb.PageLive do
use MmoLvWeb, :live_view
alias MmoLvWeb.Endpoint
@impl true
def mount(params, _session, socket) do
MmoLvWeb.Endpoint.subscribe("room")
{:ok, socket, query: "", results: %{})}
end
def handle_info(%{event: "update_player_pos", payload: new_message,topic: _}=payload,%{assigns: assigns}=socket) do
%{id: id , x: x , y: y , z: z} = new_message
{:noreply, push_event(socket,"moveto",%{id: id, x: x , y: y , z: z})}
end
def handle_event("kew_down", params, %{assigns: assigns}=socket) do
%{"key" => key , "x"=> x , "y"=>y , "z"=>z}=params
%{id: id} = assigns
case key do
"w"->Endpoint.broadcast!("room", "update_player_pos", %{id: id , x: x , y: y , z: z} )
"s"->Endpoint.broadcast!("room", "update_player_pos", %{id: id , x: x , y: y , z: z} )
"a"->Endpoint.broadcast!("room", "update_player_pos", %{id: id , x: x , y: y , z: z} )
"d"->Endpoint.broadcast!("room", "update_player_pos", %{id: id , x: x , y: y , z: z} )
_->1
end
{:noreply, socket}
end
end
Viewの設定
babylon.jsのdistディレクトリとnode_modulesディレクトリをpriv/jsにコピーし、htmlから読み込むように設定します。
lib/mmo_lv_web/templates/layout/root.html.leex
<head>
<!-- 追記-->
<script src="<%= Routes.static_path(@conn, "/js/dist/bundle.js") %>" type="text/javascript"></script>
<script src="<%= Routes.static_path(@conn, "/js/node_modules/cannon/build/cannon.js") %>" type="text/javascript"></script>
</head>
lib/mmo_lv_web/templates/layout/page_live.html.leex
<!--追記-->
<div id="rpc" phx-update="ignore" phx-hook="RPC" >
<canvas id="renderCanvas" style="width:100%"></canvas>
</div>
<script type="text/javascript">
window.game = new window.game.Game();
</script>
Javascriptの設定
ブラウザ上のキー入力をサーバに通知する処理とキャラクタ位置情報を更新する処理を作成します。
app.js
var HOOKS = {};
HOOKS.RPC={
mounted(){
this.handleEvent("moveto",function({id,x,y,z}){
const player = window.Players;
player.moveTo(id,x,y,z);
});
window.addEventListener("keydown", e => {
const player = window.players;
const p = player.getPosition(id);
this.pushEvent("kew_down", {key: e.key, x: p[0] , y: p[1], z: p[2]})
});
},
updated(){
}
}
実行
サーバを起動します。
mix phx.server
下記のアドレスにアクセスするとゲーム画面が表示されます。
http://localhost:4000
まとめ
- LiveViewを使ったお手軽ゲーム開発をやってみました。
- ネットワーク通信は挫折しやすい箇所ですが、Liveviewをつかうと通信部分は最低限の実装のみで完結します。
- 初学者にとっては目標実現までにモチベーション維持をしやすいのではないでしょうか！
最後まで読んでいただきありがとうございました。