『スピードジグソー』を改造する

前ページ では、 『泥棒バスター』の改造から動作確認・投稿の流れをご紹介しました。 ここでは改造についてもう一例、より画像差し替えがゲームに直結するサンプル『スピードジグソー』をご紹介したいと思います。

この文書は、 https://ch.nicovideo.jp/shin-ichiba/blomaga/ar1765844 で公開されていた記事を調整して転載したものです。 文体などは他のページと異なることがあります。

『スピードジグソー』のご紹介

スピードジグソーは、制限時間つきのジグソーパズルゲームです。まずはゲームをプレイしてみましょう。

このパズルの絵を差し替えるだけで、自分オリジナルの「スピードジグソー」を作ることができます。

とはいえ絵を準備するだけではなく、少しだけプラスアルファでやらなくてはいけないことがあるので順番にやり方を追っていきましょう。

環境の用意

今回の改造でもやはり動作確認のために開発用ツールが必要です。 インストール の手順を参照して、 Akashic Engine の開発用ツール akashic-cli をインストールしてください。

差し替え

それでは今回改造するゲームのソースコードをダウンロードしましょう！　以下の URL からダウンロードしてください。

https://github.com/akashic-contents/speed-jigsaw/releases/download/v1.0.2/game.zip

今回は画像を差し替えてジグソーパズルの種類を変更しましょう。 スピードジグソーを解凍したフォルダの中に、ゲームに必要なリソースが一式入っています。

その中の image フォルダの中に「ui_2.png」というファイルがあります。 この絵を差し替えればゲーム内に出てくるジグソーパズルの絵も変わります。

画像は 6 枚の絵が合わさった 1 枚の画像になっています。 1 枚、250pixel×250pixel の絵素材が 6 枚必要になります。

上の画像は絵の部分のみを表示していますが、実際のフォルダの中にある画像ファイルは 1024pixcel×1024pixel に左上寄せで絵が配置してあります。

今回はいらすとやさんの画像を使ってみましょう。 配置してみました。

動かしてみる

ここで インストール で利用した CUI ツールを再び使います。

ここで泥棒バスターの記事内の『ソースの用意』を参照いただいて、ゲームをダウンロードした場所まで作業ディレクトリを移動 (cd) し、以下のコマンドを実行してください。

akashic sandbox

実行すると、『http://localhost:3000 にブラウザでアクセスしてください』、という趣旨のメッセージが表示されます。 上記の URL にアクセスするとブラウザ上でゲームが遊べると思います。

フォルダ内の画像が元々の画像のままだと、元のジグソーパズルの絵柄です。 ファルダ内の画像を差し替えてからブラウザをリロードするとご自身で用意した画像がジグソーパズルになっているかと思います。

パズルの絵が元の絵ではなく差し替えたものに変わっていれば改造できています！

パズルの絵以外にも、タイトル等の画像も同じように差し替えることが可能です。

投稿

自分だけのゲームが完成したら、実際にニコ生ゲームとして公開してみましょう！　 ニコ生ゲームを投稿しよう を参考にぜひ投稿してみてください。