<h4 id="redstone%EF%BC%88%E3%83%AC%E3%83%83%E3%83%89%E3%82%B9%E3%83%88%E3%83%BC%E3%83%B3%EF%BC%89%E3%81%A8%E3%81%84%E3%81%86%E6%87%90%E3%81%8B%E3%81%97%E3%81%AE%E7%84%A1%E6%96%99%E3%82%AA%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E3%82%B2%E3%83%BC%E3%83%A0%E3%82%92%E3%82%A6%E3%82%A7%E3%83%96%E3%81%A7%E3%83%97%E3%83%AC%E3%82%A4%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F%E8%A9%B1">
<a class="header-anchor-link" href="#redstone%EF%BC%88%E3%83%AC%E3%83%83%E3%83%89%E3%82%B9%E3%83%88%E3%83%BC%E3%83%B3%EF%BC%89%E3%81%A8%E3%81%84%E3%81%86%E6%87%90%E3%81%8B%E3%81%97%E3%81%AE%E7%84%A1%E6%96%99%E3%82%AA%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E3%82%B2%E3%83%BC%E3%83%A0%E3%82%92%E3%82%A6%E3%82%A7%E3%83%96%E3%81%A7%E3%83%97%E3%83%AC%E3%82%A4%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F%E8%A9%B1" aria-hidden="true"></a> REDSTONE（レッドストーン）という懐かしの無料オンラインゲームをウェブでプレイできるようにしてみた話</h4>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--wbgVqJxV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576748/b252e6f7-490d-6eb7-e66b-d046fdd84b8b.png" alt="image.png" loading="lazy" class="md-img"><br>
（移植できたのはまだ一部です）</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--2WcOpPjK--/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576748/21a018fe-2b9b-8d7e-84ba-4fadcd6b8819.gif" alt="rs-web-showcase.gif" loading="lazy" class="md-img"></p>
<h2 id="%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%A7%E3%83%97%E3%83%AC%E3%82%A4%E3%81%A7%E3%81%8D%E3%82%8B%E3%83%87%E3%83%A2%E5%85%AC%E9%96%8B">
<a class="header-anchor-link" href="#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%A7%E3%83%97%E3%83%AC%E3%82%A4%E3%81%A7%E3%81%8D%E3%82%8B%E3%83%87%E3%83%A2%E5%85%AC%E9%96%8B" aria-hidden="true"></a> ブラウザでプレイできるデモ公開</h2>
<p>とりあえず、<strong>触ってみてもらうのが一番</strong>なのでデモを置いておきます！<br>
（ブラウザで開くだけでDLとか不要です）</p>
<h4 id="demo%EF%BC%9Ahttps%3A%2F%2Frs.sigr.io%2F">
<a class="header-anchor-link" href="#demo%EF%BC%9Ahttps%3A%2F%2Frs.sigr.io%2F" aria-hidden="true"></a> Demo：<a href="https://rs.sigr.io/" target="_blank" rel="nofollow noopener noreferrer">https://rs.sigr.io/</a>
</h4>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__8b7c4340faa44" src="https://embed.zenn.studio/card#zenn-embedded__8b7c4340faa44" data-content="https%3A%2F%2Frs.sigr.io%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://rs.sigr.io/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://rs.sigr.io/</a></p>
<hr>
<p>プロジェクトのソースコードも全部公開してます</p>
<h4 id="github%3A-https%3A%2F%2Fgithub.com%2Flostmycode%2Fredstone-js">
<a class="header-anchor-link" href="#github%3A-https%3A%2F%2Fgithub.com%2Flostmycode%2Fredstone-js" aria-hidden="true"></a> Github: <a href="https://github.com/LostMyCode/redstone-js" target="_blank" rel="nofollow noopener noreferrer">https://github.com/LostMyCode/redstone-js</a>
</h4>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__4a48ced5bbd06" src="https://embed.zenn.studio/card#zenn-embedded__4a48ced5bbd06" data-content="https%3A%2F%2Fgithub.com%2FLostMyCode%2Fredstone-js" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/LostMyCode/redstone-js" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/LostMyCode/redstone-js</a></p>
<h2 id="2023%E5%B9%B412%E6%9C%88-%E8%BF%BD%E8%A8%98%3A-mob%E7%8B%A9%E3%82%8A%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F">
<a class="header-anchor-link" href="#2023%E5%B9%B412%E6%9C%88-%E8%BF%BD%E8%A8%98%3A-mob%E7%8B%A9%E3%82%8A%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F" aria-hidden="true"></a> 2023年12月 追記: MOB狩りできるようになりました</h2>
<p>スキルで敵を攻撃して狩れるとこまで一旦実装できたので動画にしました</p>
<p><a href="https://youtu.be/EDfWIh6I244" target="_blank" rel="nofollow noopener noreferrer">YouTube: REDSTONEブラウザ移植版で狩りをしているデモを公開</a></p>
<p><span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/EDfWIh6I244" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://www.youtube.com/watch?v=EDfWIh6I244" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=EDfWIh6I244</a></p>
<h2 id="web%E7%A7%BB%E6%A4%8D%E7%89%88%E3%83%97%E3%83%AC%E3%82%A4%E5%8B%95%E7%94%BB">
<a class="header-anchor-link" href="#web%E7%A7%BB%E6%A4%8D%E7%89%88%E3%83%97%E3%83%AC%E3%82%A4%E5%8B%95%E7%94%BB" aria-hidden="true"></a> WEB移植版プレイ動画</h2>
<p><a href="https://youtu.be/SgPJ1gGHntc" target="_blank" rel="nofollow noopener noreferrer">Porting "RedStone Online" to HTML5</a></p>
<p><span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/SgPJ1gGHntc" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://www.youtube.com/watch?v=SgPJ1gGHntc" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=SgPJ1gGHntc</a></p>
<h2 id="%E7%A7%BB%E6%A4%8D%E3%81%97%E3%82%88%E3%81%86%E3%81%A8%E6%80%9D%E3%81%A3%E3%81%9F%E7%B5%8C%E7%B7%AF">
<a class="header-anchor-link" href="#%E7%A7%BB%E6%A4%8D%E3%81%97%E3%82%88%E3%81%86%E3%81%A8%E6%80%9D%E3%81%A3%E3%81%9F%E7%B5%8C%E7%B7%AF" aria-hidden="true"></a> 移植しようと思った経緯</h2>
<h4 id="%E5%89%8D%E6%8F%90%E3%81%A8%E3%81%97%E3%81%A6%E7%AD%86%E8%80%85%E3%81%AF%E3%80%8C%E6%99%AE%E9%80%9A%E3%81%AFpc%E3%81%AB%E6%99%82%E9%96%93%E3%82%92%E3%81%8B%E3%81%91%E3%81%A6%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%97%E3%81%A6%E3%83%97%E3%83%AC%E3%82%A4%E3%81%99%E3%82%8B%E3%82%B2%E3%83%BC%E3%83%A0%E3%82%92%E3%82%A6%E3%82%A7%E3%83%96%E3%83%9A%E3%83%BC%E3%82%B8%E9%96%8B%E3%81%8F%E3%81%A0%E3%81%91%E3%81%A7%E3%83%97%E3%83%AC%E3%82%A4%E3%81%A7%E3%81%8D%E3%81%9F%E3%82%89%E5%A4%A2%E3%81%AE%E3%82%88%E3%81%86%E3%81%98%E3%82%83%E3%81%AA%E3%81%84%EF%BC%9F%E3%80%8D%E3%81%A8%E3%81%84%E3%81%86%E6%80%9D%E3%81%84%E3%82%92%E6%8C%81%E3%81%A3%E3%81%A6%E3%81%BE%E3%81%99%EF%BD%97">
<a class="header-anchor-link" href="#%E5%89%8D%E6%8F%90%E3%81%A8%E3%81%97%E3%81%A6%E7%AD%86%E8%80%85%E3%81%AF%E3%80%8C%E6%99%AE%E9%80%9A%E3%81%AFpc%E3%81%AB%E6%99%82%E9%96%93%E3%82%92%E3%81%8B%E3%81%91%E3%81%A6%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%97%E3%81%A6%E3%83%97%E3%83%AC%E3%82%A4%E3%81%99%E3%82%8B%E3%82%B2%E3%83%BC%E3%83%A0%E3%82%92%E3%82%A6%E3%82%A7%E3%83%96%E3%83%9A%E3%83%BC%E3%82%B8%E9%96%8B%E3%81%8F%E3%81%A0%E3%81%91%E3%81%A7%E3%83%97%E3%83%AC%E3%82%A4%E3%81%A7%E3%81%8D%E3%81%9F%E3%82%89%E5%A4%A2%E3%81%AE%E3%82%88%E3%81%86%E3%81%98%E3%82%83%E3%81%AA%E3%81%84%EF%BC%9F%E3%80%8D%E3%81%A8%E3%81%84%E3%81%86%E6%80%9D%E3%81%84%E3%82%92%E6%8C%81%E3%81%A3%E3%81%A6%E3%81%BE%E3%81%99%EF%BD%97" aria-hidden="true"></a> 前提として筆者は「普通はPCに時間をかけてダウンロードしてプレイするゲームをウェブページ開くだけでプレイできたら夢のようじゃない？」という思いを持ってますｗ</h4>
<p>前回はGunZ (GUNZWEI, GunZ The Duel)という3Dゲームのマップをウェブで動かせるようにしました。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__1d64c9b8a0494" src="https://embed.zenn.studio/card#zenn-embedded__1d64c9b8a0494" data-content="https%3A%2F%2Fqiita.com%2FLostMyCode%2Fitems%2Fc358410576bb65ea9259" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://qiita.com/LostMyCode/items/c358410576bb65ea9259" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/LostMyCode/items/c358410576bb65ea9259</a></p>
<p>このときのモチベは、「ゲームのコードが全部リークしてるので、同じようにデータを読んで描画すればいけるよね？？」というものでした。</p>
<p>今回ターゲットにしたレッドストーンも、サーバー側のファイルが最近リークしており誰かがリバースエンジニアリングしてC#で書き直したコードも発見したので「RSもウェブ移植いけそう！」と思ってやってみました。</p>
<p>前回は3Dゲームだったのでマップを表示するだけでやっとでしたが、今回は2Dということもあってマップの表示だけでなくNPCやモンスターのアニメーションやプレイヤーの移動も実装することができました。</p>
<p>こちらのデモ（ <a href="https://rs.sigr.io/" target="_blank" rel="nofollow noopener noreferrer">https://rs.sigr.io/</a> ）を触ってみて興味持たれた開発者の方がいらっしゃったらぜひプロジェクト参加お待ちしてます（今はひとりでやってて限界。。。）</p>
<h2 id="%E6%8A%80%E8%A1%93%E3%81%BE%E3%82%8F%E3%82%8A">
<a class="header-anchor-link" href="#%E6%8A%80%E8%A1%93%E3%81%BE%E3%82%8F%E3%82%8A" aria-hidden="true"></a> 技術まわり</h2>
<p>全部ほぼJavascript。<br>
REDSTONEのゲームファイルをそのまま読み込んでゲームを描画してますが、バイナリの読み込み部分も描画部分も全部Javascript完結で可能でした（JSｽｷｽｷ）</p>
<p>当たり判定やモンスター狩りをサーバーサイドで実装するとしても、これもNode.jsで書けば全部jsで完結しそうです</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__734cc648c1d56" src="https://embed.zenn.studio/card#zenn-embedded__734cc648c1d56" data-content="https%3A%2F%2Fgithub.com%2FLostMyCode%2Fredstone-js" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/LostMyCode/redstone-js" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/LostMyCode/redstone-js</a></p>
<h4 id="%E3%82%B2%E3%83%BC%E3%83%A0%E3%81%AE%E6%8F%8F%E7%94%BB">
<a class="header-anchor-link" href="#%E3%82%B2%E3%83%BC%E3%83%A0%E3%81%AE%E6%8F%8F%E7%94%BB" aria-hidden="true"></a> ゲームの描画</h4>
<p>ゲームの描画はpixi.jsライブラリを使用。</p>
<p>AnimatedSpriteのようにアニメーションするオブジェクトの描画を簡単にできるのが用意されてたりするので、とてもスムーズに開発が進みました</p>
<h4 id="%E3%82%B2%E3%83%BC%E3%83%A0%E3%81%AE%E8%A7%A3%E6%9E%90%E3%81%A8%E7%A7%BB%E6%A4%8D%E4%BD%9C%E6%A5%AD">
<a class="header-anchor-link" href="#%E3%82%B2%E3%83%BC%E3%83%A0%E3%81%AE%E8%A7%A3%E6%9E%90%E3%81%A8%E7%A7%BB%E6%A4%8D%E4%BD%9C%E6%A5%AD" aria-hidden="true"></a> ゲームの解析と移植作業</h4>
<p>解析～移植作業はにらめっこの繰り返し</p>
<p>マップのオブジェクト情報（テクスチャや配置）などをゲームファイルから読み込んで適当に描画してみる</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--YglvBTUE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576748/82400aeb-156b-f979-923d-2546da6efeff.png" alt="image.png" loading="lazy" class="md-img"></p>
<p>オブジェクトの位置やIDをtextとrectで表示</p>
<p>実際のゲーム画面が正解なので、そっとと自分の作ってる画面をにらめっこしながら「なんで位置違うんだろ？」「こうしたらどうなる？」など仮説を立てつつ試行錯誤</p>
<p>ゲーム画面のにらめっこだけではどうにもならないときは、バイナリとにらめっこします</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--4GcCP03X--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576748/380ef1db-f5fb-38d5-7ce2-90dce28f3eab.png" alt="image.png" loading="lazy" class="md-img"></p>
<p>（上のはちょっと違う画像ですが）「この84bytesがゲームのマップ内の１つの建物のデータかな？」とか<br>
「この4bytesがオブジェクトの数？」みたいに仮説を立てます</p>
<p>書き換えてみてゲームを再起動して仮説と一致するかどうかという地道な作業をやっていきます。</p>
<h2 id="%E3%81%95%E3%81%84%E3%81%94%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%95%E3%81%84%E3%81%94%E3%81%AB" aria-hidden="true"></a> さいごに</h2>
<h4 id="%E4%B8%8D%E5%8F%AF%E8%83%BD%E3%81%AF%E3%81%AA%E3%81%84%EF%BC%81">
<a class="header-anchor-link" href="#%E4%B8%8D%E5%8F%AF%E8%83%BD%E3%81%AF%E3%81%AA%E3%81%84%EF%BC%81" aria-hidden="true"></a> 不可能はない！</h4>
<p>Twitter: <a href="https://twitter.com/LostMyCode" target="_blank" rel="nofollow noopener noreferrer">@LostMyCode</a></p>


オンラインゲーム「REDSTONE」をWEB移植！ブラウザでプレイ可能に！

ブラウザでプレイできるデモ公開

2023年12月 追記: MOB狩りできるようになりました

Discussion