2016年12月20日火曜日

声あり4コマ漫画ありHTML5製「間違い探し プロ生ちゃんのトレジャーハント」公開

今回の記事はプロ生ちゃん Advent Calendar 2016の20日目の投稿になります。

初めて間違い探しを作りました。プレイ時間1分程度でクリックだけのブラウザゲームです。
プロ生ちゃんの3Dモデルを使うことで、自分の画力以上のかわいいプロ生ちゃんが描けました。

今回は初めて JavaScript コードを自前で全て書きました。HTMLファイル1つだけで動作しています。


マスコットアプリ文化祭2016にエントリーしています。


紹介動画





マスコットアプリ文化祭2016にエントリーしています。


間違いは全部で8つです。ぜひリンク先から遊んでいただきたいです。
プロ生ちゃんのかわいい声が聞けたり、4コマ漫画もいくつかあります。


間違い探し作成キットも近日公開予定


これと同じシステムの間違い探しを誰でも簡単に作ることができるツールを開発中です。
使い方としては、絵をツールにいれると HTML ファイルができて、その HTML を開くだけで間違い探しゲームができる感じです。
絵のほかに音声の差し替えもでき、制限時間やGUIの位置も調整できるようにする予定です。

PySide で作っていたのですが exe 化のところで少し難航していて、別のフレームワークを検討中なので、どの程度のものができるかは作者もまだわかりません。
もしできなかったときは、この開発で使った base64 変換ツールと html の改造方法の説明などを公開しようかとも考えています。

技術的にこだわった点


より簡単にインターネットに公開できる形にしたかったので、HTML ファイル1つだけという点にこだわりました。

間違いの領域をクリックした場合に、その領域の色を変化させているのですが、負荷が高いらしく、その瞬間BGMが途切れてしまいました。
それを解消するため、Worker(スレッド的なもの)を使い、画像処理の部分を非同期で行うようにしました。

感想


間違い探しゲームの制作は、もともと絵の練習がきっかけでした。
そのころマスコットアプリ文化祭のことを知り、ちょうどよいと思い参加しました。
さらに、初めてアドベントカレンダーへ参加することもできて、うれしい誤算に喜んでいます。

今回は、初めてボイスつきのゲームをリリースできました。
BGMや効果音とは違う臨場感がでてきたなーと感じました。
「はじめるよ!」といわれると、やる気がでてくる感じがしますね(`・ω・´)
他にも数種類使わせていただきました。

また、数ヶ月前から筆者がにわかファンになっている、
大川ぶくぶ先生の4コマ漫画のイラストを
素材として使わせていただけたこともうれしいです。
素材のコマを組み合わせてストーリーを補正しながら作るというやり方も面白かったです。

ボイスも4コマ漫画の画像も、今回のこの企画でないとなかなか自作では使えなかったと思うのでよい機会でした。

当初の予定では、プロ生ちゃんの冒険シーンをあと2つ描く予定でしたが、
絵を描くのは本当に大変で、時間的に1シーンで精一杯でした。

間違い探しの絵はクリップスタジオペイントで描きました。
クリップスタジオペイントでは、冒頭のプロ生ちゃんの3Dモデル(無料)を使うことができます。
そのおかげで、だいぶきれいに早くかけたと思います。

これからも絵の練習をかねて、間違い探しの作品を作りたいと思います。

前述のとおり、間違い探し作成キットは最初 PySide で作っていたのですが、実行形式に変換する際に少し問題があったので、別のフレームワークを検討している段階です。

PySideはPythonの豊富なライブラリも使えるし、QtDesignerによってGUI設計も楽で気に入っています。
以前に「RaspberryPi2で使うツールをPython(pyside)で作ってみた(´;ω;`)」などでも使っていました。
しかし、exeに変換するあたりはまだまだ資料が少なく、モジュールをうまく探せなかったり、windows 7 のタスクバーのアイコン(QWinTaskBarButton)にPySideが対応をしていなかったりするところの対応がわかりませんでした。
py として実行できる環境でアイコンを気にしないという条件ならばPySideでもよいと思います。


そんな感じでキットは作り直し中ですが、順調にいけばお正月までにはリリースしたいと思っています。

それでは、よいクリスマスとよいお年を。(´・ω・`)ノシ


2017年02月11日追記
本作がマスコットアプリ文化祭2016の珠音ちゃん賞の1つに選ばれました。
ありがとうございます。


0 件のコメント:

コメントを投稿