WebGLとasyncioマルチプレイヤーオンラインシューティングゲーム、パート2

はじめに

2モデルとブレンダーのインポート

3. babylon.jsとモデル自体を使用してゲームにモデルをロードする

 loader = new BABYLON.AssetsManager(scene); mesh = loader.addMeshTask('enemy1', "", "/static/game/t3/", "t.babylon"); 

 mesh.onSuccess = function (task) { task.loadedMeshes[0].position = new BABYLON.Vector3(10, 2, 20); }; 

 var palm = loader.addMeshTask('palm', "", "/static/game/g6/", "untitled.babylon"); palm.onSuccess = function (task) { var p = task.loadedMeshes[0]; p.position = new BABYLON.Vector3(25, -2, 25); var p1 = p.clone('p1'); p1.position = new BABYLON.Vector3(10, -2, 20); var p2 = p.clone('p2'); p2.position = new BABYLON.Vector3(15, -2, 30); }; 

 var createScene = function () { . . . } var scene = createScene(); loader.onFinish = function (tasks) { engine.runRenderLoop(function () { scene.render(); }); }; 

  var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "/static/HMap.png", 200, 200, 70, 0, 10, scene, false); var groundMaterial = new BABYLON.StandardMaterial("ground", scene); groundMaterial.diffuseTexture = new BABYLON.Texture("/static/ground.jpg", scene); ground.material = groundMaterial; 

4. babylon.jsの動き、ミニマップ、およびゲームサウンド

• FreeCamera原則として、キャラクターの親であり、キャラクターは単純にそれに従います。高度な技術、人や飛行するすべてのものに使用するのに非常に便利ですFreeCameraは慣性と速度を調整する機能があり、これも非常に重要です。
• FollowCamera反対に、これはある種のオブジェクトをFollowCameraするカメラです。マウスとキーボードからのコントロールが異なる場合に使用すると便利です。 つまり、レビューは移動の方向に依存しません。

 //FollowCamera var camera = new BABYLON.FollowCamera("camera1", new BABYLON.Vector3(0, 2, 0), scene); camera.target = mesh; ``````javascript //FreeCamera var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3( 0, 2, 0), scene); mesh.parent = camera; 

 var music = new BABYLON.Sound("Music", "music.wav", scene, null, { playbackRate:0.5, //  . volume: 0.1, //  . loop: true, //      . autoplay: true //      . }); 

 var gunS = new BABYLON.Sound("gunshot", "static/gun.wav", scene); window.addEventListener("mousedown", function (e) { if (!lock && e.button === 0) gunS.play(); }); 

  var ms = new BABYLON.Sound("mss", "static/move.mp3", scene, null, { loop: true, autoplay: false }); document.addEventListener("keydown", function(e){ switch (e.keyCode) { case 38: case 40: case 83: case 87: if (!ms.isPlaying) ms.play(); break; } }); document.addEventListener("keyup", function(e){ switch (e.keyCode) { case 38: case 40: case 83: case 87: if (ms.isPlaying) ms.pause(); break; } }); 

ミニマップ

 camera2 = new BABYLON.FreeCamera("minimap", new BABYLON.Vector3(0,170,0), scene); 

 camera2.viewport = new BABYLON.Viewport(x, y, width, height); 

 scene.activeCameras.push(camera); scene.activeCameras.push(camera2); 

5. Webソケットとゲームの同期

• camera.cameraRotation軸に沿った回転のXおよびY座標が含まれます。
• camera.positionマップ上のメッシュの位置のX 、 Y 、 Z座標が含まれます。

6.サーバー側のデバイス

 async def game_handler(request): . . . async for msg in ws: if msg.tp == MsgType.text: if msg.data == 'close': await ws.close() else: e = json.loads( msg.data ) action = e['e'] if action in handlers: handler = handlers[action] handler(ws, e) . . . 

 def h_move(me, e): me.player.set_pos(e['x'], e['y'], e['z']) mess = dict(e="move", id=me.player.id, **me.player.pos_as_dict) me.player.room.send_all(mess, except_=(me.player,)) 

 class Player(list): . . . def __init__(self, client, room, x=0, y=0, z=0, a=0, b=0): list.__init__(self, (x, y, z, a, b)) self._client = client self._room = room Player.last_id += 1 self._id = Player.last_id room.add_player(self) . . . def set_rot(self, a, b): self[3:5] = a, b def getX(self): return self[0] . . . def setX(self, newX): self[0] = newX . . . x = property(getX, setX) . . . @property def pos_as_dict(self): return dict(zip(('x', 'y', 'z'), self.pos)) 

7.部屋ごとのプレイヤーのバランス

 if (data.result == 'ok') { window.location = '/game#'+data.room; 

 def check_room(request): found = None for _id, room in rooms.items(): if len(room.players) < 3: found = _id break else: while not found: _id = uuid4().hex[:3] if _id not in rooms: found = _id 

 #        me.player.room.send_all( {"e" : "move", . . . }) #     me.player.room.players #     me.player.room.add_player(self) #     me.player.room.remove_player( me.player ) 

 def h_new(me, e): me.player = Player(me, Room.get( room_id ), x, z) 

 player = Player( Room.get(room_id), x, z) player.me = me me.player = player 

 >>> a = {1} >>> b = a >>> b.add(2) >>> b {1, 2} >>> a {1, 2} 

 >>> a.add(3) >>> a {1, 2, 3} >>> b {1, 2, 3} 

 >>> class A(object): ... pass ... >>> a = A() >>> a.player = b >>> a.player {1, 2, 3} >>> b {1, 2, 3} >>> a.__dict__ {'player': {1, 2, 3}} 

 >>> a <__main__.A object at 0x7f3040db91d0> 

8. Asyncioおよびボットの動作生成

 mess = dict(e="move", bot=1, id=self.id, **self.pos_as_dict) self.room.send_all(mess, except_=(self,)) 

 import asyncio async def test( name ): ctr = 0 while True: await asyncio.sleep(2) ctr += 1 print("Task {}: test({})".format( ctr, name )) asyncio.ensure_future( test("A") ) asyncio.ensure_future( test("B") ) asyncio.ensure_future( test("C") ) loop = asyncio.get_event_loop() loop.run_forever( ) 

9. Nginxおよびソケットプロキシ

 server { server_name aio.dev; location / { proxy_pass http://127.0.0.1:8080; } } 

 server { server_name aio.dev; location / { proxy_pass http://5.5.0.10:8080; } } 

 server { server_name aio.dev; location / { proxy_pass http://127.0.0.1:8080; } location /ws { proxy_pass http://127.0.0.1:8080; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } } 

10.非同期キャッシュ。

  dct = CIMultiDict() print( dct ) <CIMultiDict {}> dct = MultiDict({'1':['www', 333]}) print( dct ) <MultiDict {'1': ['www', 333]}> dct = MultiDict([('a', 'b'), ('a', 'c')]) print( dct ) <MultiDict {'a': 'b', 'a': 'c'}> dct = dict([('a', 'b'), ('a', 'c')]) print( dct ) {'a': 'c'} 

 d = MultiDict([('a', 'b'), ('a', 'c')]) prepared = [(k, v) for k, v in d.items()] saved = pickle.dumps(prepared) restored = pickle.loads(saved) refined = MultiDict( restored ) 

 def cache(name, expire=0): def decorator(func): async def wrapper(request=None, **kwargs): args = [r for r in [request] if isinstance(r, aiohttp.web_reqrep.Request)] key = cache_key(name, kwargs) mc = request.app.mc value = await mc.get(key) if value is None: value = await func(*args, **kwargs) v_h = {} if isinstance(value, web.Response): v_h = value._headers value._headers = [(k, v) for k, v in value._headers.items()] await mc.set(key, pickle.dumps(value, protocol=pickle.HIGHEST_PROTOCOL), exptime=expire) if isinstance(value, web.Response): value._headers = v_h else: value = pickle.loads(value) if isinstance(value, web.Response): value._headers = CIMultiDict(value._headers) return value return wrapper return decorator 

 from core.union import cache @cache('list_cached', expire=10 ) async def list_tags(request): return templ('list_tags', request, {}) 

あとがき

ping

不正行為

ロードマップ-ゲーム

• ボット射撃、より多くの武器。
• タンク制御-タワーのみがマウスで回転し、タンク自体は矢印で回転します
• さまざまな角度からの動き
• 宇宙/空戦用のマップとコントロールの追加
• アーバンテラーのようなフィールドに歩兵戦争マップとキャラクターを追加する

• すべての動きを確認する
• ショットの方向を確認する
• ボットの機能を拡張する（たとえば、ボットの数を増やす、動的に減らすなど）
• ボットのベースAI

ロードマップ-フレームワーク全体

• 小さいCMS
• 倉庫会計のコンストラクター（ミニERP）
• レポートデザイナー
• MongoDBのWebクライアント
• デモミニソーシャルネットワーク