Vue.jsでリヴリーアイランドを再現した話

こんにちは。ゆーろんです。

JavaScriptの学習のためにいくつかフロントエンド完結のものやNode.jsベースのものを作成してきましたが、作成した中でユニークなものである「クラシックリヴリーアイランドの再現」の制作話や使用技術に関してまとめます。

そもそも制作した「リヴリーアイランドの再現」といっても、リヴリーアイランド自体がよくわからない方もいると思うので解説します。
リヴリーアイランドは2002年にリリースされたブラウザで遊べるオンラインゲームです。

ブラウザ版の運営は株式会社ゲームポッドが運営していましたが、2019年末にサービス終了となりました。

現在(2022年)は株式会社COCONEにリヴリーアイランドに関する権利が譲渡され、2021年ごろにネイティブアプリとしてリヴリーアイランドがリリースされています。
上記の画像はネイティブアプリとしてリニューアルした際のデザインです。

そんなリヴリーアイランドですが、私自身もかつてPC版を何年もプレイしていました。

あるときに、スマホ版(ネイティブアプリ)としてリヴリーアイランドがリリースされているのを知ったの同時に、以下のような記事を読みました。

こちらの記事は現在スマホ版リヴリーアイランドの運営をされている株式会社COCONEさんのエンジニアの方が書いた記事です。

この記事を読んだことと、スマホ版リヴリーアイランドを私自身が認知したことで「JavaScriptでリヴリーアイランドの再現が作れるのでは？」と思い作ることにしました。

もともと制作には生のJavaScriptを使って開発をしていましたが、このまま書き続けるとコードが冗長化し、保守性や可読性に欠け開発が大変になることに気づきました。

そこで、Vue.jsでゲームが作れるという話を思い出し、原神の公式サイトのブラウザゲームもVue.jsのFWであるNuxt.jsで作られていたということからも、Vue.jsに開発を移すことにしました。

開発にあたっては「CDN版」と「npmインストール版」があり、通常のWEBサーバで動かしたい事から、CDN版を選択することにしました。

実際、開発当たってはGitHubリポジトリを見ればわかるように画像制作もせねばならず、JavaScriptと相性がいい画像形式である「.svg」画像の知識や、描画をDOM要素で表現することから、ある程度のCSSの知識も求められました。

また、Vue.jsのコンポーネント間の値の受け渡しの癖的なものも慣れるのに時間がかかりました。
書き方に癖があるReactよりもコンポーネント間の値の受け渡しに関してはVue.jsの方が大変でした。
ただVue.jsはHTML部とJavaScript部の記述を分けて書けるのでフロントエンド(HTML/CSS)と言う視点では見やすいように思えました。

一応最低限実装したかった機能は実現できたので本ホームページにデプロイしました。
機能としてはキャラクター「のD&D機能、餌やり機能、ふれあい機能のみです。
他の機能は気が向いたときに少しずつ実装していくかもしれません。

ここまでご覧くださりありがとうございました。