【Typescriptでゲーム制作】AI対戦のオセロゲームを作ってみた

どうもです。あいぺけです。

前回の投稿から1年が経過していたようです。笑

忙しかったり、書く題材がなかったのでnoteから離れていましたが新しく作ったゲームがあるので紹介していきたいと思います。

今までPythonを使ってゲーム作りをしていましたが、今回はTypescriptを使ったゲームを作ったのでその経緯とかを書いていきたいと思います。

最初に、作ったオセロゲームのリンクを貼り付けておきます。
Webなのでダウンロードとかは必要なく、スマホとPCの両方に対応しています。

Othello

また、遊び方の動画も作成したのでどんな感じかだけでも見てもらえると嬉しいです

1. Rustは諦めました笑

前回、noteに「Rustの勉強を始めました」と書きましたが、秒で挫折しました。笑

Rust言語に挫折というよりはRustでゲームを作るのが難しくて断念したという感じです。

Rust自体は書いていて楽しい気がするし、最近はツールがRustで書き直されることで高速になった、みたいな記事を見ていると言語としてはとてもいい言語なんだろうなという感じがします。

これまではPythonを使ってゲーム作りをしていましたが、今は仕事でWeb開発をしているので仕事の勉強にもなるようにと思ってWebを使ったゲーム作りをしてみたいなと思ったのがきっかけでした。

WebでとなればJavascriptのような気がしますが、自分はJavascriptに対する苦手意識みたいなのがあってできればJavascript以外で作ろうとしたところRustとWebAssemblyを使ってゲームが作れると知ってRustの勉強を始めました。
（勉強のためにWebのゲーム作り、とかいいながら、苦手という理由で普通にJavascriptを避けようとしました笑）

で、実際に勉強していると思ったんですね、むずいって。

そしてWebエンジニアとして3年目にして察しました。
Webエンジニアとしている限り、Javascriptから逃れられないと（遅い）

そんなことでRustでのゲーム開発は諦め、勉強兼趣味としてJavascriptでWeb用のゲームを作り始めることにしました。

TypescriptにしたのはJavascriptの上位互換、みたいなイメージがあったのでそうしました。

実際に型があった方が自分は良かったですし、ゲーム用のフレームワーク（Phaser3）を使う時も型から使用できるもの表示してくれるので助かりました。

2. ゲーム用フレームワーク Phaser3

JavascriptやTypescriptを使ってゲームを作る方法を調べていると、いくつかオープンソースのゲーム用のフレームワークがありました。

その中で、割とメジャーっぽいPhaser3を使うことにしました。

調べると日本ではマイナーみたいなことが書かれていたりするので、自分は海外の人の画質の荒いYouTube動画を見ながら勉強したりしていました。笑

Typescript（Javascript）のゲーム用のフレームワークはPhaser3しか使ってないので、他がどうなのかは分かりませんが個人的には使いやすい気がします。

特に、今回のようなオセロゲームのようにマス目のあるゲームは作りやすかったです。

ちなみに、自分はUnityを使ったゲーム作りもしたこともありますが、Unityはプログラミング言語以外にUnityのツールとしての使い方が重要になってくるので、勉強用としてゲーム作りをしている自分としてはプログラムの書き方とかに重点を置きたかったので、Unityでのゲーム作りはやめました。

ただ、ゲーム作りを目的にするならUnityはとても良いと思います。
自分も本格的にゲーム作りをするなら、Unityで作るかなと思います。

3. AI対戦ができるオセロゲーム

とりあえず、最初は自分のオリジナルとかではなくて実際にあるゲームかつ簡単に作れそうなものとしてボードゲームを作ることにしました。

また、Pythonでゲーム作りをしていた時から思っていたAI対戦みたいなものを作りたいと思っていたので、ボードゲームの中でも比較的作るのに難しくなさそうなオセロを題材として選びました。

AIの処理方法はゲームAIの基本と言われるαβ法という探索手法を使って実装しました。

調べると基本とか書かれていますが、理屈を知って実装するのが普通に難しかったです。

4. 盤面の種類が選べる

今回作ったオセロゲームは盤面の状態を選ぶことができるようにしています。

なので、普通のオセロとは違ったプログラムならではのゲームを作れたかなと思います。

盤面の状態が変わることで、セオリー通りいかなくなったりするので取り入れてみました。

盤面の状態を変えてもAIの処理は変わらず動作できるので盤面の状態によってはAIが強いかもしれません。

5. 終わりに

Typescriptの言語とPhaser3のフレームワークの勉強で時間がかかりましたが、完成形として持っていけたのは良かったと思います。

見栄えが多少野暮ったい感じがするので、それはおいおいどうしたらいいか考えるとします。

自分の友人にプレイしてもらったところ、割と強くて普通に負けると言ってくれました。

まあ、オセロの勝ち方みたいなのを知っていれば勝てるのでその友人達が弱いだけかもしれません。笑

思ったことばかり書いて肝心の制作物についてあまり書けていない気がしますが修正や変更があったときにまた書こうと思います。

また、盤面の種類のアイデアがあれば教えて欲しいです（実装するとは言ってない笑）

ここまで読んでいただき、ありがとうございました。