Node.jsおよびAngular.jsでのゲーム開発経験

私のゲームの開発の歴史をあなたと共有したいと思います。



だから、ゲームプログラミングに手をかけることにした4年前にすべてが始まりました。 ほんの3人で集まった私たちは、 Unreal Engine 3をマスターするために駆け抜けることに決めました。 経験の浅い私たちは、クールなグラフンでMMOを実行するために急いで行きました。 音、銃、レーザー、そして開かれた世界などがあるように。 当然、これはすべて結果をもたらしませんでした。ヒューズは消え、プロジェクトはigrodevの深byに落ち着きました。



しかし、私はまだプログラミングに対する情熱があり、アイデアが蓄積され、得られた経験から正しい（当時の）決断を迫られました。

ゲームを作りたいなら、自分でやりましょう。

パート0。プログラマーがPvPゲームを作成するのが簡単なのはなぜですか？

フレンド：このゲームでは、マジシャンはfotmです！ あなたがPvPゲームを持っていたら、それは楽しいだろうし、とても退屈だろう

私：わかりました、マジシャンへのダメージを減らします

フレンド：いいえ、4人の魔術師のチームを作り、このクマを引き裂きます...



私の頭の中でゲームのオプションを見積もった結果、私は自分のプロジェクトがRPGであることに気付きました。 これは私のお気に入りのジャンルであり、そのゲームメカニクスの作成は、プログラマにとってケーキのようなものです。 私はまた、ゲームを戦術とうまく機能する戦略の範囲を与えるためにターンベースにするべきであり、敵の狂った呼び出しのためではないことを決めました。 設定は、オークとエルフによく知られているファンタジーでした。 このゲームのアイデアは次のとおりです。4人のヒーローの分遣隊がロケーションを通過し、モンスターのグループ、時にはボスを押しつぶします。 言語の選択はC＃にかかった 彼は非常に有名で人気があります。 さらに、大学でC ++を教えられ、C＃への移行は簡単でした。



そして今、6か月後、私はすでにC＃でゲームをしていて、そこでチームを作成してスイングを開始できます。 しかし、内部の何かは、それが面白くて退屈ではないことを示唆しました。 プロジェクトの分析中に、次の欠点を特定しました。

1. 内容 モンスターの群れの中を歩くことは、RPGによく似ています。 しかし、多くのモンスターが必要であり、全員がポートレートを持ち、少なくとも1〜2個のユニークな能力を持っている必要があります。 さらに、相手はスキルを正しく管理するためにAIを処方する必要があります。 自分を5〜10個のモンスターに制限するということは、非常に退屈なゲームを作ることを意味します。 さらに、量的変化ではなく、質的変化に費やすことができる膨大な時間と労力が必要になります。
2. レベリングはRPGの不可欠な属性ですが、クラス能力のバランスを地獄に変えます。 私は第1レベルで能力をチェックしました-それは100レベルで許容範囲を超えています-十分ではありません。 彼はフォーミュラの能力のダメージを増加させるステップをひねりました。1日目は正常になり、100日目も正常になりましたが、今では50日目では十分ではありません！ そして、新しい方法で！ そして、あなたは座って、何時間も数字を回します。
3. 在庫と設備は、揚水と同じ問題です。 1レベルでは、いくつかの特性の増加は0.00012％でしたが、100レベルでは、クリティカルヒットの可能性は70〜80％になる可能性があります。
4. 退屈 。 無限の場所を駆け抜け、ドレッシング/ポンプグループがゲームプレイの本質を変えることはありません。 99レベルでは、1番目と同じようになります。数字だけが高く、モンスターは厚くなります。

C＃ゲームプロトタイプ



これらすべての考えから、 PVP指向のゲームを作成するというアイデアに至りました。 自分のゲームが別の形式でどのように見えるかを頭の中で考えて、前の段落をもう一度修正しました。これが私が得たものです。

1. 内容 対決チームを率いる場合、すべてを削減して、多数のキャラクターまたはその能力を作成することができます。 新しいゲームでは、いくつかのクラスを実装し、戦闘に取り入れることができるスキルの選択肢を提供することにしました。 したがって、コンテンツの作成は、両側の敵がそれらを使用するため、新しい能力のみの導入に削減されます。 さらに、AIを記述する必要はありません。
2. レベルアップ 。 私は経験と平準化のシステムを放棄することにしました。 一方では、これはプレーヤーが自分の行動と進歩の結果を観察しないという問題につながります。 一方、すべてのプレイヤーを同じ立場に置きます。 ゲームに参加したばかりの人は、すでにそこで時間を過ごしたプレイヤーと同じ勝ちのチャンスがあります。
3. 在庫および機器 。 それでも進歩がないという問題が私を克服したので、ゲームに機器を導入することで状況を修正することにしました。 しかし、私はこれらすべてを少し変わった形で提示しました。 その瞬間、私はゲームのBlade＆Sword （ディアブロの中国語コピー）を思い出しました。キャラクターの弾薬は変わらず、宝石のみが挿入され、鎧の特性が変わりました。 現在、戦闘に参加しているプレイヤーは特定の通貨を受け取り、キャラクターに新しい石を購入して特性を改善することができます。 成長はありますが、キャラクターの量的指標にのみ直接的な影響があるため、ゲーム内の「クールなフォルダー」に追いつくことはそれほど難しくありません。
4. ファン 。 AIがどんなに読み書き能力があっても、互いに戦うプレイヤーの不合理な思考には向いていないことに注意してください。 あらゆる種類のMOBAとカードゲームの人気はFAQに基づいており、生きている人々、対戦相手の脳が戦闘で生成できる数百万の状況とトリックに直面しています。 多数の戦術的な動きとチーム設定により、再生可能性が追加されるだけで、「別のリンク」をプレイできます。

ゲームのPvPの方向性から、私はWEBに戻ることができなくなった。 考え直すことなく、 HTMLとCSSの基本を学び始めました。 いくつかの簡単なサイトと私は、どちらの方向に進むべきかをすでに認識していました。 「ブラウザゲームの作成」というリクエストでGoogleのページをいくつか読んだ後、私は不可解なNode.jsを掘り下げる必要があることに気付きました。 当時、特にC＃の後、すべての新しい言語とフレームワークは信じられないほど複雑に見えました。 ほとんどの場合、Ilya Kantorは、この新しい世界を習得した教訓からテクノロジーを選択しました。 したがって、 Node.js、Express.js、MongoDB、Socket.ioの束を取得しました。 クライアント側の質問のみが未解決のままでした。 私はほんの少しのJQueryしか知らなかったので、自分のアイデアをどのように実現できるか想像できませんでした。 バックエンド部分全体がAngular.jsに向かって指を向けていましたが、最初は魔法のようでした。 魔法は楽しい、選択が行われました！



そのため、技術スタックが発見され、ゲームに取り組むプロセスが開始されました。

パート1. Sishel-mouse-walk-out

私：あなたにリンクを投げ、登録をクリックして詳細を記入してください

フレンド：OK、今すぐ試してみます...

私：まあ、どうですか？

友人：名前が思いつかない...

私：はい、入力してください

フレンド：すべて、登録済み

私：なぜ入らないの？

友達：パスワードを忘れました...



キャラクター作成画面を作成し、それらの特性と能力をリベットし始めたいという強い希望があっても、ルーティングの問題、セッション、データベースの操作に対処する必要がありました。 アドレスバーに美しいリンクを作成して、ブラウザの[戻る]ボタンで彼女ではなく必要な場所に戻るようにしたかったのです。 キャラクター「Vasya」がゲーム内にいる場合、別のホストから別の「Vasya」が入るとどうなりますか？ 新しいVasyaを起動しないか、古いVasyaを破棄する必要があります。 2番目のオプションを検討する必要がありましたが、その実装には少なくとも2週間かかりました。 次に、Zen WebSocketsを理解しました。だれが誰かにブロードキャストし、どこで、誰がどの部屋に、誰がioで、何がソケットかを発信します。





angular.jsを使用した検証付きの登録フォーム



この段階での最小タスクは、正しく動作する（少なくとも外観上）登録およびログインプロセスの実装です。 その後-他のユーザーが見えるサーバー上の部屋に入る。 これらすべての労働の結果を友人に見せた日を覚えています。 彼は登録し、ログインし、...彼がサーバー上の唯一の人物であるという画面に出ました。 2か月間のハードワークの結果。

パート2.重金属

私：天使と悪魔についてのゲームをします

友だち：エルフがいたら残念だ。そんな耳鼻咽喉科を作っていただろう！



次の小さなタスク（当時私には思えた）は、チームとキャラクターを作成するプロセスを実装することでした。

ゲームの開発に夢中になっていると、設定、特性、能力、人種、クラス、およびメカニズムに関する思考が脳を爆発させます。

ノートにたくさんのアイデアを書き留めました。

ほとんどの場合、インスピレーションは夜に転がり、睡眠を妨げました。 役割と人種の数は、頭の中で150回スクロールされ、消化可能なバージョンにトリミングされました。 最後に、私はすべて同じオークとエルフを作り始めました。



キャラクター作成画面の準備が整った段階で、洞察力が私に現れました。





キャラクター作成画面



今覚えているように、私は通りを歩いていて、 ユダの司祭の歌「デモナイザー」を聞いています。 曲の最後でロブが「demonizeeeeeer」をのぞき始めた瞬間、私は「これはクラスの素晴らしい名前です！ 残酷で、つぶやき、暗い雰囲気を作り出しています。」 思考のサイクルは、設定を「メタライズ」するというアイデアに私を導きました。 その結果、クラス、ユニフォーム、および能力のすべての名前は、何らかの形でロック音楽に関連付けられました。 これらはすべて、天使と悪魔の対立のラッパーに完全に適合します。





Demonizerクラスを導入したことはありませんが、 Sentinel 、 Ripper、およびRedeemerが登場しました 。 ありがとうロブ！



Angular.jsのジャングルに行くほど、それが大好きになったことは注目に値します。 ゲームで作業している間、このフレームワークをingる価値のある欠点を明らかにしませんでした。

パート3.長時間ライブ三角法！

私：三角形の助けを借りて、魔術師が完全に力を発揮することが可能になります

友人：n @ ndはそのような魔術師を必要としない



最後に、私は「甘いもの」に到達しました-力学と特性の誕生。 キャラクターを操作することは、能力を選択し、アーマー用の新しい石をリベットで留めることにあると想定されていましたが、さらに先へ進むことにしました。 MMO Riftのキャラクタージェネレーターの肌の色の設定の三角形に触発され、各キャラクターの基本的な特性と同じようなことをすることにしました。 キャラクターの強さ、器用さ、知性の最大可能インジケータが三角形の3つの角にあると想像してください。 これらの特性の現在の（または現在の）値は、最初は図の中心にある白い点の位置によって決まります。 このポイントのいずれかのコーナーに近づくほど、対応するインジケーターの現在の値が大きくなり、逆も同様です。 たとえば、強さの角度に移動すると、可能な限り強さの割合が高いキャラクターが得られますが、彼の器用さと知性は0になります。





キャラクター設定の三角形（結果のメトリック：強さ120、器用さ30、知性17）



「ウィキペディア」で武装した私は、3つのチェビアンの交差点がそれぞれの比率を共有する比率を理解するために、三角法の学校コースを思い出し始めました。 これと並行して、 Excelでテーブルをコンパイルし、ユニフォームの特性の特性を書き留めました。 最終結果は非常に喜ばしく、実現した「機能」に誇りを持って捉えられました。

パート4.服を着て、ワンショットをエスコートする

友達：ゲームをもうプレイできますか？ それとも、すべての統計を回していますか？

私：まだそうではありません。歌とショットは1つだけです

Friend：まあ、WoWもそうですが、人々はプレイします



インベントリは非常に長い時間をかけて作成されました。 たとえば、 ドラッグアンドドロップの実装は困難でした。 ところで、このメカニズムのためのツールの選択は、同胞のモジュールにかかっていました。 もう1つ興味深いのは、クラフティングシステムに関するインベントリを作成する前に、考えたことは1 つもなかったことです。 さまざまな値のランダム化されたストーンを作成するというアイデアは、すぐに頭からコードに移行しました。 すぐにその下でやり直され、通貨システム。

座って、頭の中で何百回もシャベルで洗うよりも、すぐにコードを書き始める価値があり、食欲があります。

インベントリ、弾薬、クラフトシステム、キャラクターの特性



キャラクターの能力に近づいたとき、私はすでにすべてがどのように見えるべきかについてかなり明確な絵を持っていました。 障害は、戦闘がどのように行われるかを正確に知らなかったことでした。 ゲームの最初の能力は、敵キャラクターにnダメージを与える通常の「ストライク」でした。 これで、能力の作成が停止し、戦闘室（またはアリーナ）の建設が始まりました。



驚いたことに、アリーナは非常に迅速に、深刻な問題なく形になりました。 そして、私たちは戦いに到達したので、それについてもう少しお話しします。 戦闘は、10x10セルのフィールドで「3x3」形式で2つのチーム間で行われます。 キャラクターは、特別なスケール（「 HoMM 5 」のように）に従って交互になります。 彼の順番では、プレーヤーはいくつかのアクションを実行でき、そのアクションはエネルギーを消費します。 1つのチームが完全に死亡または降伏するとすぐに、戦闘は終了します。 一般的に、結果はWoWの3x3アリーナですが、チェスの混合物のみです。



私のゲームの最初の試合は次のように見えました。2つのチームがお互いを攻撃し、対戦相手を「ストライク」する能力です。 誰が逃した-彼は失いました。 これは、複雑なメカニズムの実装を開始し、能力を構築するために戻るのに十分でした。

パート5. 5つのすべてのスキル

私：まあ、彼らはあなたがゲームについて言うことをテストしましたか？

友人：切迫したリッパーと救い主、彼らは一般に激しいので。 私は神託を理解していませんでした;それは状況にあまりにも依存しています。 異端者はあまり終わらない。 クレリックを備えたタンクは退屈で、ヒールをカットし、ダメージを追加する必要があります。 Maleficaに触れないでください、彼はちょうどいいです。 また、すべての絞首刑執行人の能力のCDを下げます。

私：バランスは取れていますが、ゲームはどうですか？

フレンド：ノルム



ゲームの作成のごく初期の段階で、各能力の変動性のアイデアが頭の中で組み立てられました。 その意味は、「小さな火傷」スキルと「巨大な溶岩流星」スキルを作ることではなく、「火の玉」スキルを5回使用することです。

• 1-ダメージはほとんどありませんが、安価であり、すべてのターンが使用されます。
• 5番目-それどころか、多くのヒットがありますが、めったになく高価です。
• 2,3,4-ゴールデン平均を検索します。

能力編集ブロック



さらに、一部のスキルは、オプションに応じてその動作を根本的に変更します。 数式に添付されるだけではありません。



新しい能力を生み出すプロセスは、私が開発で最も刺激的なものと呼びます（ただし、前回のゲームでは完全に腹を立てました）。 次のスキルの作業中に、新しいメカニックを追加する必要がありました。 効果、エリアへの呪文、衝撃、不可視性、攻撃、免疫、マナおよび他の機能の回復により、機能が拡張され、新しい機能を発明する道が開かれました。 現時点では、 8つのキャラクタークラスにはそれぞれ8つの呪文があります。



私はその夜、友人と私がすでに私のゲームに本当に切り刻まれていたときのことを覚えています。 信じられませんでした！ ごく最近、私は誇らしげに彼にゲームへのエントリーの形を見せました。 その瞬間、私はいくつかの重大なバグが戦闘の途中でゲームを台無しにし始めるという考えに悩まされました。 しかし、ゲームはコンソールへのエラーの投入を断固として拒否し、最初のテストは「1回中断することなく」合格しました。

パート6。今は何ですか？

私：ほら、あなたに沈黙を投げたことがログに書かれている

友人：すべては英語で、私はそこを見ていません...



作業の次のステップは、プロトタイプをすぐに見たいという欲求のために、ずっと遠い箱に入れ続けていたものを実装することでした。

前に、私は自分のモニターでのみゲームの快適な外観を心配していました。 アダプティブレイアウトを実行します 。 CSSの分野にすべての知識を集中して、すべての解像度で満足のいく外観を達成しました。



私がゲームを見せたすべての人は、ロシア語にローカライズする必要がありました。 当時、私には不可能な仕事のように思えました。 国際化の問題を注意深く研究して、 getTextモジュールとPoEditプログラムに行きました。 彼らの助けにより、約1週間でゲームをロシア語に完全に翻訳するという問題を解決することができました。





ロシアチームのホーム画面に適合



ゲームのサウンドデザインについて疑問が生じました。 サウンドを実装するために、 ngAudioモジュールが選択されましたが、いくつかの困難が生じました。 戦闘では50を超えるサウンドを使用する予定でした。 これを行うために、サウンドオブジェクトの名前付き配列を作成し、個々の要素を再現しました。 最初はすべてうまくいきましたが、戦いが始まるとすぐにひどい凍結が始まりました。 ゲーム中に何かがあふれていることが明らかになりました。 そこで、作成を最適化するという質問に取り組み、angular.jsのダイジェストサイクルと$$ウォッチャーの研究に進みました。



クライアント全体の最適化にはかなりの時間と労力がかかりましたが、完全に報われました。 ゲームははるかに高速に実行され、$$ウォッチャーの数は約40％削減されました。



一連のテストの後、ゲームの一般的な欠点も明らかになりました。 当初、プレーヤーは一度に複数のチームを持つことができると想定されていました（グラディエーターマネージャーなど）。 ただし、システムは実際には役に立たなかった。 データベース内のデータ量が増加し、追加のチームの作成は意味がありませんでした。 ゲームはプレイヤーに向けられました---タイプチーム---> 3文字。 この上に、資源の浪費のための焼却と復活のシステムがありました。 また、戦闘中にブラウザーのタブを失うか、単に閉じた場合の罰の問題も解決しました。



このようなシステムを変更せずに導入すると、プレーヤーは停止状態になります。 彼は死んだチームとリソースなしで残される可能性があります。 したがって、私は追加の収入源を思いつきました。 彼らはミニゲーム「スローダイス」になりました-ほとんどのソーシャルゲームにある通常のルーレットです。





内蔵ミニゲーム「Roll theさいころ」



この時点で、このゲームは他の人に見せるためにすでに形成されているように見えました。 そこで、 Gitでプロファイルを開始し、そこにすべてを転送しました。 以前にバージョン管理システムが何であるかを知っていたなら、多くの時間を節約できたでしょう。 さらに、ゲームを外部ストレージに「アップロード」するという問題が発生しました。 Heroku PaaSプラットフォームは、無料の関税を持っているので、選択は落ちました。 いくつかの困難もありました。node.jsの環境変数であるnpmとbowerを知る必要がありました。



ショーの前に、ノートにきちんと整然と生まれた大胆なアイデアの残りを実現する必要がありました。 サウンドトラックは、ゲームに双方向性を追加しましたが、戦場にテキストのポップアップのアイデアを提案し、ダメージ、回復、ミスを反映しています。 指令の作成とテキストの「出発」の指示により、数日間の骨の折れる開発とデバッグが行われました。 今でもこのシステムには小さな欠陥がありますが、他の未実現の機会を気にしませんでした。





戦場でのポップアップダメージの数値



翻訳、スコアリング、ポップアップテキストの具体化により、私と私の主な批評家は戦闘の状況をよりよく理解し、ゲームと対話することができました。 これらの作業段階は私にとって非常に難しいことが判明しましたが、タスク自体は以前に習得したすべてのスキルの使用と新しい知識の吸収を伴いました。

それぞれの困難は、加速と結果に焦点を当てることで克服されました。

パート7.準備ができていません！

フレンド：ゲームの内容をだれも理解せず、翻訳します...

***

Friend：今ではすべてがロシア語になっていますが、まだ誰も何も理解していません。 マニュアルを書く...

***

友人：私はあなたのマニュアルを見ましたが、何もはっきりしていません。 より良いビデオガイドを作成する...

***

フレンド：聞いて、あなたは何をしているのか理解していない、誰もそれを必要としない！ 9つの能力でみんなを良くする...



私のノートブックからの最後のグローバルな革新は、戦場での障害の整理です。 驚くべきことに、私はそれらを2日間で実装することができました。 さらに、障壁は動きだけでなく、能力の使用も妨げました。 柱の後ろに隠れて、医者からあまりにも遠くに逃げた敵を殺す機会がありました。



これに続いて、一連の複数のバグ修正とバランス修正が行われました。 すべての準備が整ったようで、大衆にゲームを見せて、彼ら自身が何が足りないのかを判断する時が来たようです。 しかし、私の完璧主義はいつも私を止めました。 いいえ、あなたの子孫が笑されたり、批判されたりするという恐怖でさえ、カカキや他のinに投げ込まれます。



どういうわけかオープンテストの瞬間を延期するために、私は新しいタスクを思いつき始めました。 目標は、ゲームのユーザーマニュアルを作成することでした。 すべてのゲームにはマニュアルがあります。 私はそれがそんなに難しい仕事だとは思いもしませんでした！ クリエーターとしてのあなたの初歩的なニュアンスはすべて、人々が噛んで説明しなければなりません。 3日間の苦痛の結果、40のルールのタルムードが誕生しました！ ページ。 40、カール！



達成感を持って、自分の作成に興味のある人を受け入れるためにVKグループを作成しました。 すべてが準備できたようで、開始する時間です。 しかし、どんなに！ 人々は来ますが、どのように彼らに従うのでしょうか？ 誰がどのチームを作成したかを知るにはどうすればよいですか？ ゲームで最も人気のある能力は何ですか？



サーバーに管理パネルと統計を作成するのに1週間近くかかりましたが、これには特に複雑なことはありませんでした。 サーバー上のすべてのプレーヤーの便利な視覚的表現を作成しました。これは、WoWの「武器」のようなものです。 その後、 Chart.jsを使用してさまざまなグラフを作成しました 。これにより、クラス、能力、能力レベル、および石（誰が何を気にするか）の人気を追跡できます。 Ladderタブ（レーティングテーブル）も実装されました。これは、毎週の終わりにすべてのプレーヤーに表示できます。 次に、 Google Analyticsをすぐにangle.jsにねじ込みました 。 私にとって重要なのは、ゲームからではなく現在のオンラインを監視することだけです。





管理者：サーバーの統計グラフ



現時点では、全世界が私の骨の折れるが非常に興味深い仕事の結果を見ることができるように精神的に準備ができています。 私の友人と私が初めて一緒にサーバーに行った瞬間から1年以上が経過しました。 私の経験が他の初心者のイグロデロフにも役立つことを願っています。

ご清聴ありがとうございました！