MIS.W 公式ブログ

早稲田大学公認、情報系創作サークル「早稲田大学経営情報学会」(MIS.W)の公式ブログです!

ブラウザMMORPG企画を振り返る + サークル代表としての抱負【カウントダウンカレンダー2019冬14日目】

こんにちは, MISW53代の"びらき"と申します. 弊サークル3つの研究会(プログラミング, CG, MIDI)のうちのプログラミングをゆるゆると触っている者です.

今回の記事では,

  1. 企画長として, ブラウザMMORPG企画の振り返り
  2. 新しい幹事長として, これからのデジタル創作サークルMISW

の話を書いていきたいと思います.

ブラウザMMORPG企画を振り返る

f:id:WBeLucky:20191222100916j:plain
魔法少女あふたーすくーる タイトル画面

さて, 先日2019年11月2, 3日に行われた早稲田祭に展示するゲームとしてMMORPGを作ろうという企画をやっていました. MMORPGというのはMassively Multiplayer Online Role-Playing Game の略です. つまり, 複数人が同じマップに同時にログインして楽しむロールプレイング・ゲームです. その企画を運営する企画長という役割をやっていました. その企画をご紹介しながら振り返っていこうと思います!

何を作ったか

こちらから遊べます.

https://mmorpg2019.games.misw.jp/#/

ブラウザで遊べるアクションMMORPGを作りました. タイトルは「魔法少女あふたーすくーる」です. テーマは企画長である僕の思いつきで魔法少女ということになっています.

f:id:WBeLucky:20191222102426p:plain
ゲーム画面

俯瞰2D平面上でプレイヤーである魔法少女を操作して, 現れる敵を他のプレイヤーと協力しながら倒してくというゲームになっています. 敵味方が魔法を飛ばし合うという弾幕シューティングのようなゲーム性になっています.

主な機能

  • ブラウザ上で動作する(chrome推奨ということで開発)
  • スマホも部分的に対応
    • 当初はPCでのみ動作できるようにするつもりだったのですが, スマホでいざプロジェクトのURLを開いてみると, スマホでも動かせそう?!とある時思ってしまって, やってみました(沼でした...)
  • 新規登録でアカウントを作ってログイン
    • プレイヤーの見た目を自分で決められる
      f:id:WBeLucky:20191222102059p:plain
      キャラクター作成画面
  • チャットができる

ゲーム性

  • エストが存在.ボス部屋が存在. ボスを倒せばクリア
  • 全方向弾幕シューティング
    • 画面をクリックするとその方向に攻撃エフェクトを飛ばせる
    • 敵も攻撃を飛ばしてきて当たるとダメージを受ける.
  • レベリング要素
    • ステータスが存在し, 敵を倒してレベルが上がるほど強くなる.
  • (一応)複数人で協力
  • プレイヤーキルができる
    • 味方に自分の攻撃が当たると微量なダメージを与えてしまう.
    • これでじゃれ合って楽しむお客さんも多くいらっしゃった.

開発動機

この企画は11/2,3の早稲田祭に公開するための企画でした. この早稲田祭では老若男女問わず, 多くの方に遊んでいただきました. PCを3台用意していたのですが, PC3台+スマホから2名の計5人で協力プレイして楽しんでいる様子も見られました.

f:id:WBeLucky:20191222102541j:plain
早稲田祭での展示の様子

実は技術的興味から始まった企画で, サーバーサイド言語であるGoが好きな人やブラウザを制御する言語であるTypeScriptが好きな人で「ブラウザゲ作りたくね?」と話していて始まった企画です. MMORPG魔法少女がテーマっていうのは企画長の僕の思いつきでした.

開発

  • 開発期間: 7月中旬 ~ 11月3日(早稲田祭当日)
  • 人員 slackには35人,
    • うちプログラムの人は20人
    • 残りはグラフィック, サウンドの人
      • BGM, タイトル画面, 敵/味方キャラクター, ロゴ, マップチップなどを担当していただきました.
  • しかし実際アクティブだったのは1/3程度
  • プロ研のメインのコミッターはおよそ5人程度.

サークルの企画+技術的ハードルがなかなか高い企画で, 初心者教育がなかなかできなかったということもあり, 活動率はとても悔やまれる感じになってしまいましたね..

主な使用技術

  • Go
    • サークルが所有するサーバー or heroku上で動いてる
    • PubSubメッセージングモデルで設計を簡略なものに
    • DBはpostgreSQL
  • TypeScript

    • vue (ログイン画面, UI)
    • PIXI.JS (ゲーム画面)
  • Rust

    • ゲームで必要なツール作成(キャラクターアニメーション生成やマップ生成)
  • サークルの強い人がCI/CDを用意してくれた(Circle CI, GitHub Action)

Rustという言語があるのはRustが好きな方がいらっしゃったからですね. 僕自身はフロントエンド側の調整を行っていました. TypeScript側もGo側ももりもり書いてくれるフルスタックエンジニアの方と, サーバーサイドであるGo言語側を担当し, 開発環境(CI:継続的インテグレーション, CD:継続的デプロイなど)を整備してくれた方がいて彼らには本当に助けてもらいました.

苦労した点

  • コミッター育成  コミッターが少なく, かと言って初心者に教えるコストもなかなか高いものでした... サークル内で大規模開発をする時は講座などをもとから用意しつつ育てていくのが理想なんでしょうけどなかなか難しいものがありました...

  • 複数言語が入り乱れると大変  一つの機能を導入するためにフロントエンド側, バックエンド側の各言語を触らないといけないというのが大変でした.

  • 設計  サーバー側の設計に苦労したらしい(サーバーサイド担当談)

  • アニメーション  アニメーションをブラウザ上でさせようとするのに一苦労でした... イラスト担当の方には数百枚に登るパーツを書いていただき, それを手で合成していくという作業でした... 協力していただいた方には本当に感謝しています.

f:id:WBeLucky:20191222104925p:plain
アニメーション制作の様子

  • MMORPGというジャンルがそもそも大変
    • 無限にイベントを通知するJSONが存在
    • マップ情報, キャラクターの移動, NPCとの会話を始め, 多くのイベントを通知するためのJSONを各言語で処理する必要がありました.
    • 物理判定を導入しだすと計算量が多くてとても重かったりしました.
    • チート対策は諦め
      • 物理判定は各ブラウザでやらせるので, サーバーにセッション情報を持ったJSONデータを送ればチート可能という状況でした.

学んだこと

  • 意外と動く  限界を試していませんが, 20~30人くらいの同時ログインでもまぁまぁ稼働しました.

  • 通信することを学んだ  今まで僕自身が通信の絡むアプリケーションを作ったことがなかったので, とてもいい勉強になりました. 特にオンラインゲームということで他プレイヤーの動きを線形補間するなどいろいろな工夫が必要でした.

  • タスク分散の必要性  企画長である僕にコードを書くなどのタスクが集中している時期もあり, 人員が少ないこともありますが, タスクがうまく振れていなかったかなぁと思いました.

  • ゲームエンジンは偉大  描画ライブラリであるPIXI.jsなどを使用していたものの, やはりUnityやUnreal Engineでの開発には敵わないというのがゲーム制作的観点からの感想です.

総括

この企画は僕自身も技術的興味から始めたところがあり, サークルの技術に詳しい方々を通して多くのことを学べました. 反面, 当初ゲームを作りたいと集まってきた方々に対してうまく仕事を振ることができなかったのが悔しいところです.

今年はサークル内ではこのような挑戦的な企画が多かったのですが, 初心者を育成していくことを目的としたゲームジャムのような企画を立てられたらいいのかなと思いました.

現状, あまり機能はありませんが, せっかく汗水垂らして作った基盤があるので, 次に展示するときに向けてぜひ機能開発を続けていければと思っています.

幹事長としての抱負

弊サークルでは3年の12月でサークルから引退する伝統があるのですが, 先日12/13の引退式にて先輩方の引退に伴い, 私がサークル代表(幹事長)をこれから一年勤めさせてもらうことになりました.

サークル代表だからといってそれほど大きな決定権を持つわけでもないのですが, この一年間こんなサークルにしていければいいなぁというのをせっかくなので書いてみます.

このサークルの強み

このサークルMISWの強みといえばなんと言っても単一の分野だけに集中するサークルではなく, 人によって専門としていることが違うということでしょう.

プログラミング, CG, MIDI(サウンド)の三研究会と呼ばれる区分に加え, 更にその下に動画に特化した動画班, ウェブデザインに特化したウェブデザ班などが存在しています.

そういった自分の専門とする/したい分野の研究会/班で活動刺激し合うだけでなく, 自分の専門外の分野の人と協力して新しい価値を生むことができるのがこのサークルの他にはあまりない強みだと思っています.

例えば, 代々続く音ゲーム企画であるRHYTH-METRIAという企画はプログラム, イラスト, 音楽の人が必要不可欠ですし, ボカロ企画はボカロ作曲, イラスト, 動画の人が揃ってからこそできる企画でした. そのようなここでしかできないことを活かして行ければなぁと思っています.

ともかく, 自分の知らない表現力を見て聞いて, 同じ分野, 違う分野同士で刺激し合って, 楽しく創作できる場であってほしいなぁと思います.

外部との交流の活発化

東京には我々MISWの他にも, 同じようなデジタル創作をするサークルが複数存在しています. 例えば, 早稲田大学のもう一つのデジタル創作サークルであるWCEさんや東工大traPさん, 東京工科大のクリエイティブスタッフさんなどですね.

そのようなサークルとの交流をより活発にしていければいいなぁと思っています. 例えば, 同じ早大のサークルでは早稲田祭/理工展での作品を交換留学させたり, 大学外のサークルと技術交流(LT大会)などができたら楽しいのではないかと考えています.

最後に

MISWも近年会員が百人規模の大きなサークルになってきました. 来年2020年は先輩方代々作ってきたこのサークルの"創作で刺激し合う"という良い雰囲気を守りながら, より活発なサークルにしていけたらなぁと思っています.

2019年のカウントダウンカレンダーはこれにて終了です! 次は春の新歓ブログリレーの機会になると思います! またデジタル創作サークルMISWをよろしくお願いします!