Aikの技術日記

技術的な進捗とか成果とかを細々と投稿するブログです。時々雑記も。

トップ > Webプログラミング > プログラミングとシュミレーションゲーが融合したScreeps:Arenaやってみた Part1

プログラミングとシュミレーションゲーが融合したScreeps:Arenaやってみた Part1

Webプログラミング Part1

はじめに

お久しぶりです、筆者です。

突然ですが、筆者は最近面白そうなゲームを見かけまして…。
それがこれ、『Screeps:Arena』。

store.steampowered.com

Steamのインディーズゲーム感溢れる作品ですが、何と凄いのが「リアルなプログラミング言語を使ってゲームをしていく」という点。
この手の「プログラミングしながらゲームができる」系のゲームは幾つかあるみたい(紹介記事)ですが…。
本作のゲームジャンルは何とストラテジーゲーム。
いやストラテジーゲームとこういったのってどうやって組み合わさってんだって感じですよな…。

というわけで、本記事ではこのScreeps:Arenaを遊んでみたLOGを残していきたいと思います。
はたしてどんなゲームなのか楽しみですね…。

それではいきましょう٩( ‘ω’ )و

ゲーム購入〜起動

ゲームを始めるため、早速Steamから購入してDL。
なお料金は2050円…が、10%OFFとなってて1845円でした。お安い…。

store.steampowered.com

また、何とMacOSにも対応してました!
Steamで売られているゲームってだいたいWindows対応のみだったりするのでありがたいですね…。

なお、ゲーム自体の容量もむちゃクソ軽かったです。70MBくらい?
ワンチャン低スペPCでも動くかもしれませんな…。

起動後の画面はこんな感じ:
"Screeps:ArenaのTOP画面"

…先に申しておくと、現時点(2022/04/11)では本ゲームは日本語対応されていません。
日本語化MODも探してみましたが見つからず…。
というかSteamのレビューに日本語レビューが1件もありませんでしたからね。まだまだ注目度は低いゲームなのでしょう…。
((まぁ現時点(2022/04/11)ではアーリーアクセスゲームですしね、しゃあない。

画面の話に戻して。
Capture the Flagだったりとよく見るようなメニューやSpawn and Swapといった防衛ゲームっぽい?ものも見えますが…。
何はともあれまずはチュートリアルから。
右上のTutorialをクリック。

するとこんな画面が!
"Screeps:ArenaのチュートリアルTOP画面"

左下にフォルダパスやPLAYボタンがあったりしますね。
まぁとりあえず、右の画面を読んでみましょう…。

Introductionの章を抜粋してざっくり和訳するとこんな感じでした:

  • Screepsはscripting creepsって意味だよ
  • このゲームはリアルなJavaScriptを使うのよ
    • JSを使ってユニット、クリープ、振る舞いを組み上げていこう
  • コードはローカルのフォルダに保持されているよ
  • ゲーム内にエディタはまだ用意できてないので、VSCodeみたいなエディターを使ってね
  • ローカルファイルはPLAYボタンを押すと、サーバーに送付されるよ
    • シンタックスコードがなければゲームは開始されるよ
    • ゲーム中コードは変えられないよ
  • ゲームは数秒で終わるけど、プレイヤーは好きなスピードで見れるよ

…なるほど、ローカルエディタでコードを操作すると。
左下に見えたフォルダパスは、どうやらScreeps:Arenaが実行する参照先フォルダみたいです。

私はMacOSでしたが、配置場所はここになりました:

/Users/XXX/ScreepsArena/tutorial-loop_and_import

また、エディタが搭載されていないとのことで…とりあえずVSCodeを起動。VSCode is 神。
フォルダにはmain.mjsというファイルが配置されており、中身はこんな感じでした:

import { } from '/game/utils';
import { } from '/game/prototypes';
import { } from '/game/constants';
import { } from '/arena';

export function loop() {
    // Your code goes here
}

…素晴らしくわかりやすいファイル。きっとloop()関数に何か書けばいい感じに動くのでしょう…。
チュートリアルの続きを読んでみます。

ざっくり和訳するとこんな感じ:

  • ゲームが開始されるとloop()関数が呼び出されるよ
    • ゲームが終わるまで、この関数の中身が呼び出されるよ
  • loop()関数とは別に、スケジュールコマンドが用意されているよ
    • loop()関数が終わった後に遅れて実行されるよ
  • getTicks()関数という特別な関数も用意されているよ
    • 現在の秒数を記すことができるよ
    • import { getTicks } from '/game/utils'みたいな感じでimportしてね
  • このゲームにおいてconsole.logはゲームコンソールパネルにデバッグ用の情報を出す関数になるよ
    • console.logはインポートしなくてもいいよ
  • とりあえずステップ1の段階では、console.logとgetTicks()を使って現在の秒数を出力してちょ

…なるほど…。
とりあえず、言われた通りにコードを書いてみましょう。こんな感じ:

import { getTicks } from "/game/utils";

export function loop() {
  // Your code goes here
  console.log("Current tick: ", getTicks());
}

そして左下のPLAYボタンを押すと…。
こんな起動画面に!

"Screeps:ArenaのPLAY画面"

そして、console.logに記されたデバッグ内容が出力!! いやぁすごいですな…。

まだユニットも動きも何も定義していないので殺風景な光景ですが、自分が書いたコードが実際に動くというのはなかなか感慨深いものがあります。
本格的にこのゲームを知って行くには、もっと先のチュートリアルを見る必要がありそうです。

なお、クリアしたらRewardsというものにチェックがついていました。
"Screeps:Arenaのチュートリアルクリア画面"

Takenボタンを押すと何かゲットした様子に…なんだろうこれ。
横にあるInventoryを押すと、こんな画面に。

"Screeps:ArenaのInventory画面"

…?
とりあえず、チュートリアルを進めましょう…きっとなんか説明あるでしょ。

おわりに

さてチュートリアルの続きを…と言いたいところですが、ちょっと疲れたので今回はここまでにしようと思います。
英語ドキュメントを普段からあまり読まず、Google先生に頼りまくる影響で英語耐性があまりなく…orz。
ただ、非常に英語としては読みやすい文章だったので。訓練にはちょうど良さそうです。

本ゲームは2050円の代物ですが、4/15までならなんと10%OFFの1845円で買えるみたいです。
また、デモ版もあるみたいでそちらはSteamアカウントさえあれば無料で遊べるっぽいので…。
どんなもんか試してみるにはちょうどいいかもしれません。

まだまだゲームの核心部分には触れていませんが、もし気になった方はぜひこちらから:

store.steampowered.com

続きはまた今度投稿していければと!
それでは|дﾟ＊)

余談-mjsってなに?

チュートリアルにも出ていた、あまり見慣れない拡張子mjsについて気になったので調べてみました。
どうもESModuleのファイル形式として採用された拡張子の1つみたいです。
超乱暴に言えば、これもまたJavaScriptファイルとして扱われるのは変わりなさそうかなと。

詳しくはこちら参照に。