見出し画像

WEBでサクっと遊べる漢字クイズゲームを作った！

Ayumi＠インディーゲーム開発

『三色くんの日本史漢字クイズ』

説明するよりやるほうが早いです！（PC推奨です）

三色くんの日本史漢字クイズ

また、Xのポスト内埋め込みもためしてみました。PC限定ですが、タイムライン内でさくっとゲームが始まるの、楽しいと思うでぜひ試してみてください！


メイキング

立ち絵（作ってもらった）

このゲームに登場している和服の美少年は「三色くん」と言い、ゆいちろさん （ https://x.com/yicr222 ）のオリジナルキャラクター、いわゆる"うちの子"さんです。
ゆいちろさんは平安時代を初めとした日本史や日本文化に博識で、外国産であるがゆえに和ものに弱い生成AIを使って、和ものに多くチャレンジされてるすごい方です。
わたしは日本史と漢字に弱いので、ちょいちょいゆいちろさんの雅な話の漢字を読み間違えていました。
「とりぼうしってAIで出ないですよね！」←えぼし（烏帽子）

「三色くんのゲーム作りたい！」→「三色くんの立ち絵欲しい～」ってなって、ゆいちろさんに突然無茶ぶりしたところ、快く作っていただきました。そのときのわたしのモンスターぷりが垣間見えるゆいちろさんサイドのメイキングのストーリーがXで展開されています。

背景

背景はわたしの方でnijijourneyで作りました。nijijourneyはスタイルコードとを指定すると、おおむね同じ雰囲気のイラストを出力する機能があります。この機能を利用しました。三色くんの立ち絵がきっとくると信じて、似合いそうなマイルドカラーなかわいい和背景を作りました。
全５問のクイズゲームに背景を７枚作りました。

白緑ピンクの和室
四季がテーマの和庭園とか
なんかハッピーそうなやつとか・・・


システム

そもそもなんでクイズゲームを作ろうと思ったのかというと、かわいいテンプレートとエンジンを見かけたからです。

上記のテンプレート「Ink Visual Novel Template」がサクっとwebノベルゲーム作るのに向いていそうでかわいい！使ってみたい！と思ったのがきっかけです。もとは、「Fix Your Mother's Printer」というitch.ioで公開されているゲーム用に作られたそうです。

inklestudioのinkというノベルゲーム風のスクリプトを利用します。公式のinkleというアプリが必要で、ここからアプリの入手と簡単なチュートリアルが見られます（英語）。

日本語化

inkで書いたシナリオ

日本語混じりでスクリプトを書いたのですが、話者を認識してくれない！これは、調べていったところ、「vn-runner.js」の中身で話者タグをアルファベット大文字で識別している箇所が原因だったので、ここだけ少し変更しました。話者タグを使わないこともできます。
あとは「style.css」で全体の色味をおだんごカラーに調整し、「index.html」からセーブなどのボタンを消しました。

公開

公開先は無料のnetlifyを利用しました。ドラッグ＆ドロップで簡単！


宣伝！（宣伝？）

わたしは、Xでは「パンケーキ天使」という、天使の輪がパンケーキになっている男子の天使のキャラクターのイラストをAI生成でよく出しています。
日本語が強い文系の和菓子（おだんご）の三色くんと、英語が強い理系の洋菓子（パンケーキ）のパンケーキ天使・・・　アイドルユニットみたいになったらかわいくない！？ということで最近アイドルユニット風のイラストを生成しています！応援してくださいね！（？）


この記事が気に入ったらサポートをしてみませんか？