無料プレイゲーム

ご覧のとおり、このクラスには3つの空の方法があります. これらにはフェイザーが付いています.シーンクラス. これらの各方法には、以下で説明するように異なる機能があります

1日未満でリアルタイムマルチプレイヤーブラウザゲームを構築 – パート1/4

ゲームをしますか. ああ! 自分で構築することを考えたことがあります. ふーむ.. ゲームは本質的に構築するのが難しいようです. 多くの感動的なピースが関与していること（文字通り）であるゲーム開発は、ネットワーキング、数学、グラフィックスなどの聖地に足を深く浸した開発者に限定されているようです。. ただし、Webがこれまでに迅速に進化し、近年にわたって拡大しているすべての新しいプロトコルとライブラリにより、ブラウザベースのマルチプレイヤーゲームの構築を始めるのは非常に簡単です. この記事では、スペースインベーダーのリアルタイムマルチプレイヤーゲームの段階的な実装を見てください（ああ、ノスタルジア!）Phaser3と適切にリアルタイム. https：// space-invaders-multiplayerで最終ゲームをホストしました.Herokuapp.com/あなたがそれを試してみるために. 途中で、この背後にあるアーキテクチャ、システム設計、ネットワーキングプロトコルを理解し、マルチプレイヤーブラウザーベースのゲームを構築する際に注意するための警告を見てみましょう. このチュートリアルシリーズは、4つの部分に分類されています。

• パート1：ゲームの概念とフェイザーライブラリの紹介
• パート2：リアルタイムアプリのネットワーキングプロトコルの評価
• パート3：すべてのプレーヤーを同期させるためにサーバー側のコードを実装する
• パート4：クライアント側のコードを完成させてゲームをレンダリングする

始める前に最後の1つ. この記事では、JavaScriptとExpress/nodejsの基本的な理解を想定しています. 私はできるだけ他のすべてを説明しようとします����‍����

ゲームを始めましょう!

パート1-ゲームの概念とフェイザーの紹介

ゲームのルールを見ることから始めましょう。これは、オリジナルのレトロクラシックとまったく同じではないためです.

マルチプレイヤースペース侵略者のゲームルール

• .
• 各プレイヤーは、キーボードの矢印キーを使用してアバターを左または右に移動できます
• 各プレイヤーは自分のアバターを白で見ることができますが、他のすべての人が彼らに事前に割り当てられたランダムな色で見ることができます
• . この船は、5秒ごとにランダムに変化するランダムに選択された方向に水平軸に沿って移動します. これに加えて、船の速度も変わります. この船はまた、定期的に弾丸を撃ちます。
• .
• ゲームに勝つ目的は、船によって撃たれている1つ以上の弾丸に殺されることなく、ゲーム画面の境界線に到達することです.

リアルタイムマルチプレイヤーゲームのコンポーネント

これらのそれぞれをさらに見てみましょう.

1. 資産

資産はゲームを構成する重要な要素です. ゲームにオブジェクトを表示する場合は、ゲームキャンバスにオブジェクトを描画するか、画像またはスプライトシートを使用してアニメーション化することができます。. 同様に、ゲームで紹介してプレイしたいオーディオは、その資産に該当します.

ゲームのテーマスーパーアーケードを作成することに興味がある場合は、Glauber Kotakiのこのピクセルアートチュートリアルをフォローしてどのように学ぶことができますか.

2. 物理

物理学は、私たちが資産を動かして、ゲームの異なるオブジェクトがどのように相互作用するかを決定できる理由です. たとえば、ポンの単純なゲームでは、ボールは特定の方向に戻ってバウンスされ、特定の速度はパドルのどの部分が衝突したかによって異なります. 同様に、私たちのゲームでは、これには、船が行く必要がある場所、速度、弾丸の撮影、これらの弾丸オブジェクトのプレイヤーのアバターなどのコンピューティングが含まれます。.

これらすべては、基本的に物理学の概念に沿った数学的計算です。. しかし、非常に多くの数学は、単純なゲームでもゼロから書くのに圧倒的です. ですから、ゼロからすべてを書く代わりに、私たちのためにほとんどの数学の魔法を行うことができる物理エンジンを使用できます.

3.

マルチプレイヤーライブオンラインゲームにとって特に重要な最終的なコアコンポーネントはネットワーキングです. すべてのプレーヤー間の同期を維持し、どのプレーヤーが死んだか、他の全員がその主張に同意するかどうかを把握するのは非常に難しい場合があります.

これがすべて複雑に聞こえ始めても心配しないでください、それはそうする必要はありません. . 問題の特定のゲームのメカニズムに関して、ゲームアーキテクチャをどのようにしたいかを選択できます. この記事シリーズを通して、このゲームを構築するために行ったパターンとアーキテクチャの選択について説明します。.

コアコンポーネントをよりよく理解できるようになったので、ゲームでこれらを機能させる方法を探りましょう.

Phaser 3を使用して資産を追加し、物理学を有効にします

Phaserは、HTML5のJavaScriptフレームワークをレンダリングするオープンソースのキャンバスとWebGLです. Phaser 3を使用してゲームを構築します. 私がバージョンに特に言及している理由は、構文を含むPhaser 2と3の間に多くの壊れた変化があるからです. また、あなたが将来自分でゲームにいくつかのクールな新機能を追加したいと思っている場合、あなたは何/どこを見るべきかを知っている必要があります.

Phaserは、キャンバスにアセットを表示したり、アニメーションやサウンドをWebページで再生したりすることができるだけでなく、組み込み物理エンジンも付属しています（実際には複数）. これは、2つのオブジェクトが衝突したときに何をする必要があるかのようなことを伝えることができることを意味します。.

Phaser 3で初めて作業することをお勧めするPhaser用の本当に良いビデオチュートリアルシリーズがあります.

TL; DRバージョンでは、phaser3を使用して、キャンバスのサイズ、そのスタイルの属性、ゲームプレイに含まれるさまざまなシーンなど、キャンバスとゲーム自体に関する情報を持つ構成オブジェクトを指定できます。 （まもなく説明）、物理エンジンの種類（フェイザーには多くのように）など.

次に、構成オブジェクトを渡して新しいゲームを開始します.

まだコードを見ていないので、これは少し混乱するかもしれません. 次にそれをしましょう.

とりあえずゲーム画面に直行しましょう. 後で起動とリーダーボードのページについて心配してください. . このキャンバスは、実際のゲームを保持して実行します. それで、ファイルを作成し、それをインデックスと呼びましょう. . 物事を整理するために、すべてのHTMLファイルをViewsというフォルダーに保存し、すべてのクライアント側JavaScriptファイルをpublicというフォルダーに保存します . ビュー/インデックスを始めましょう.

ご覧のとおり、ここで行っているのは、まもなく追加するCSSおよびJSファイルへのリンクだけでなく、さらに重要なことには、Phaser JS CDNへのリンクだけです。. GitHubプロジェクトからCSSを直接​​コピーできます

それ以外は、HTML本体内には、ゲームコンテナのIDを備えたDIVがあります . これがJavaScriptを介してゲームキャンバスを追加する場所です.

パブリックフォルダーにファイルを作成しましょう。スクリプトを呼び出します.JSと、以前に説明したゲーム構成オブジェクトを定義することから始めます.

ご覧のとおり、キャンバスのサイズとその背景色を指定することは別として、このキャンバスが必要な場所（親によって識別）と、この一部になりたいシーンの配列も指定しました。ゲーム.

Phaserは「シーン」の概念を使用してゲームのコンテンツを整理します. あなたはシーンをいつでも視覚的に見ることができるものと考えることができます. ゲームをプレイしている間、ゲームがゲームオブジェクト間で異なるインタラクションで異なる背景に切り替えた場合、それはおそらくあなたが以前に見ていたものとは別のシーンです.

私たちのゲームには、単一のシーンがあります（GamesCeneによって識別されます）. PhaserのシーンはPhaserを拡張するクラスです.シーンクラス. 私たちのゲームにこれを定義しましょう. GamesCeneクラスを参照しているため、構成オブジェクトの上に次のコードを追加します.

ご覧のとおり、このクラスには3つの空の方法があります. これらにはフェイザーが付いています.シーンクラス. これらの各方法には、以下で説明するように異なる機能があります

1. Preload（）メソッドは、どこにいても必要なすべてのリソースを取得します。ゲームに追加したいときに準備を整えます.
2. create（）メソッドは、ゲームが最初に実行されたときに1回実行されます. この方法では、すべての変動初期化、アニメーション定義などを追加できます.
3. 更新（）メソッドは、ゲームがオンになっている限り、ループで継続的に実行されるため、ゲームロジックに従ってゲームオブジェクトを絶えず更新できます. この方法では、アバターを更新し、弾丸を撃ち、船を移動します。..

資産のロードとアニメーションの作成

先に進んで、今すぐ資産をロードしましょう. Preload（）メソッドを次のように定義します

私はもともとこのゲームをグリッチでホストしました。これは、CDNリンクで取得できるバケツにすべての資産を保管します。. 同じことを使用できます。そうでなければ、Amazon S3はもう1つの一般的なオプションです.

3種類のアバターを追加しました。. それらとは別に、私たちは船、弾丸、そしてもちろんプレーヤーが死んだときにプレイする爆発の資産も追加しました.

.負荷.spritesheet（）と3つのパラメーターを送信しました。

• 識別子
• 実際のファイルへのパス
• ファイルの寸法（ピクセル）.

.

p.s. アバターの色を実装するより良い方法があります. 同じオブジェクトを別々の資産として複数の色でロードするのではなく、既存のスプライトに色の色合いを追加することができます. まだわかりませんが、私がそれを理解したときにこれを更新します:)

「爆発」スプライトシートを検査すると、隣り合っているさまざまな画像がたくさんあることがわかります。. 「アニメーション」を引き起こす方法は、特定の速度でこれらの異なる画像を通過することです。.

create（）メソッドでは、この爆発のアニメーションを定義します。

Phaserのこれを使用しました.アニック.（）メソッドを作成してアニメーションを作成します. この方法は次のとおりです。

• このアニメーションを再生するために後で使用するキー
• このアニメーションを適用したい資産の識別子を使用してフレームを生成するフレーム
• このアニメーションを再生したい速度を指定するフレームレート
• アニメーションが実行される回数を指定する繰り返し繰り返します
• HideonCompleteは、アニメーション化されていたアニメーションが完了した後に消えるべきかどうかを指定します

今のところ更新（）メソッドには何も追加しません. あなたが気づいた場合、私たちも実際にゲームをインスタンス化していません、私たちはこの記事シリーズの後の部分でそれを行います.

今のところそれだけです. パート2のリアルタイムアプリのネットワーキングについて学びます – リアルタイムアプリのネットワーキングプロトコルの評価

このシリーズのすべての記事：

• パート1：ゲームの概念とフェイザーライブラリの紹介
• パート3：すべてのプレーヤーを同期させるためにサーバー側のコードを実装する
• パート4：クライアント側のコードを完成させてゲームをレンダリングする

.

また、このプロジェクトに関する最新の開発については、GitHubプロジェクトに従うこともできます.

ご質問がある場合は、Twitter @srushtikaでお気軽にご連絡ください. 私のDMは開いています:)

カテゴリ：マルチプレイヤービル

. ゲームは先史時代の神話上の世界で設定されています[…]

Muckは、人気のあるノルウェーの開発者、アーティスト、YouTuber Dani（Crab GameとKarlsonを作った）による無料の*シングルプレイヤーおよびマルチプレイヤーサバイバルPC（Windows）用のMultiplayer Survival Roguelikeゲームです。. マックは低いポリでカジュアルでありながら（非常に）挑戦的な融合の生存の混合です（e.g. […]

サンドボックスは、アクティブな開発（オープンアルファ）のPC（Windows and Mac）のための無料でプレイとプレイからプレイ、分散型、コミュニティ駆動型のゲームエコシステム＆仮想世界であり、イーサリアムブロックチェーン上に構築されています（Aentralandと同様）. プレイヤーは構築、独自、共有、[…]

Coreは、CraytaやRobloxに似​​た無料のゲームコレクションとゲーム制作プラットフォームです. 言い換えれば、コアはプレイする無料のゲームと、簡単にできるグローバルな開発者コミュニティによって設計された世界を探索するための世界です[…]

Craytaは、CoreとRobloxと同様に、PC用のUnreal Engine 4に基づいて構築された、無料でプレイできるコラボレーションゲームメイキングプラットフォームとマルチプレイヤーアーケードゲームコレクションです。. プレイヤーは、プログラミングエクスペリエンスに関係なく、クラウドで一緒にゲームを作ることができます. から […]

ワイルドテラオンラインは、サンドボックスとサバイバル機能を備えた無料のMMORPGであり、完全にプレーヤー制御された中世のファンタジーの世界に設定されています. タスクのチェーンを完成させ、装備を作成するために千のオオカミを殺す必要はありません. すべてが大きい[…]

ARK：Survival Evolved（Mobile）は、モバイル（Android、iOS）のStudio WildCardによる無料プレイ*モバイルアクションアドベンチャーサバイバルゲームです。恐竜やその他の先史時代の動物、自然災害、[…]

. […]に焦点を合わせるのではなく

トーモリは楽しく革新的な無料プレイの共有マルチプレイヤーbrawlerゲームで、他の人を倒そうとしながらタワーを構築します。. . 友達と対戦するか、ボットに対して練習する、[…]

Galactic Junk Leagueは、競争力のある無料プレイのクラフターアリーナです。ほとんど無限の造船所の可能性が混ざったシューティングゲーム. 何でも構築します. 誰でも戦う. 宇宙で. 文字通り、あらゆる形やサイズにジャンク船を構築し、[…]の創造物と戦う

Creativerseは、友達との冒険、探検、創造性についての楽しい無料でプレイできる次世代のMMOサンドボックスゲームです. そして、今では自由に遊ぶことができます. あなたは猛烈な獣に囲まれた広大で神秘的な世界に取り残されています[…]

GunscapeはFPS構造キットです. それはあなたがあなたの創造性をポンピングアクションサンドボックスでワイルドにすることができるゲームです! Gunscapeは、シングルプレイヤーを作成するために誰もが既によく知っているブロック配置インターフェイスに基づいて使いやすいツールを提供することでこれを行います[…]

Troveは、PC（Windows、Mac）、Xbox One、PS4、Nintendo SwitchのTrion Worldsによる、無料のオープンエンドアクションアドベンチャーVoxel Mmorpgです。. Troveは、クエスト、チェスト、敵で満たされた無数の領域を特徴としています. あなたの道を探索して創造します[…]

Robloxは、ユーザーが独自のゲームやレベルを設計および共有できるようにし、[他のユーザーが作成したあらゆるタイプのゲームを[CoreとCraytaにも同様）無料でマルチプレイヤーオンラインビデオゲームとゲーム作成プラットフォーム（CoreとCraytaに似ています）です。 …]