スキップしてメイン コンテンツに移動

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

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

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

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


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


紹介動画





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


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


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


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

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

技術的にこだわった点


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

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

感想


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

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

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

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

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

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

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

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

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


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

それでは、よいクリスマスとよいお年を。(´・ω・｀)ﾉｼ

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


ラベル

ラベル:

コメント

コメントを投稿

このブログの人気の投稿

QTableView で表を表示してみる

タイトルは駄洒落を狙っているわけではありません。 こんばんわ SakuraCrowd です。 今回は今作っているソフトの経過報告です。 最近のブログのパターンは、 「ＸＸＸ作ったよ。これがスクリーンショットね。あとこんなこと思ったよ。」 という流れですが、 今日はできていないソフトの部分的な話なので、 いつもよりもプログラムちっくな話になると思います。(´Ծ_Ծ´)ﾒｶﾞﾈﾉﾄｷﾊﾏｼﾞﾒﾌﾞｯﾃﾙ QTableView は GUIライブラリ Qt のクラスです。 それを Python で使うための PySide というライブラリを使っています。 某表計算ソフト っぽい表の GUI です。 このデータの日付が 09/01 なのでおそらくその日に   QTableView 使うぞ！(｀・ω・´) とサンプルデータを作ったのでしょう。 Qt Designer という GUI エディタを使うとポトペタでウィンドウを設計できます。 選択できる GUI の中に QTableView と QTableWidget があります。 どちらも上のような表の GUI です。 QTableWidget は 簡単 に値をいれたりできます。 Qt Designer 上で直接編集 することができるので、 サンプルの表を簡単に作ることができます。 それに対して、 QTableView は Qt Designer 上では値を編集できません。たぶん。 QTableView の強みは MVC の構造 を使えることです。 名前のとおり QTableView は View です。 これにデータを管理している Model オブジェクトを設定して使います。 Model クラスを作る手間がかかりますが、 GUI の細かな操作をしなくても Model に応じた表を表示してくれます。 Model は QAbstractTableModel を 継承 して作ります。 コンストラクタで基底クラスの処理を呼び出し、いくつかの純粋仮想関数をオーバーライドします。 def __init__ ( self , parent= None , *args):...
コメントを投稿
続きを読む

HSPで画像の重ね合わせをしてみた

あいにくの曇り空だったが、 スーパームーン を少し見ることができた。 なんとなくだが、月明かりがいつもよりも強い気がする。 中秋の名月とほぼ同時に月が地球に 接近するのは稀らしいので何かありがたい(-人-) 先週ブログを書いていたときに、 ハロウィン にちなんだゲームを作りたいなー と思っていて、ふわっとした企画を考えて、少し作り始めた。 まだできるかどうかわからないけど、初めて HSP で絵を出せたのがうれしいのでブログを書いてみる。 HSP 自体はだいぶ前から知っていて、ちょっとしたＧＵＩのツールを作ったりしていた。 GUIアプリケーションをここまで短く実装できる言語は自分の中ではこれが一番だと思う。 もっと短くできるかもしれないが、ビギナーな私でもこのくらい短くかける。 screen 0, 160, 64 // ウィンドウ作成 button "greet", *OnGreet // ボタン作成＆イベント関連付け stop *OnGreet // イベント dialog "Hello!" stop バージョンアップして今では WebGL や 　iOS や Android でも実行できる。 そのときは HSP3Dish という環境を使うために  #include "hsp3dish.as" 　でスクリプトを読み込む。 　参照： HSP3Dish プログラミングマニュアル・基本仕様ガイド 制限として、拡張プラグインやCOM/Variant型や外部DLL呼び出しやモジュール変数については未サポートのようだ。 ゲームでスプライトを用いるため es_set などのスプライト用の関数を使いたかったが、これは hspdx という拡張プラグインなので HSP3Dish には対応していないと思う。 そんな理由から、スプライト系の処理を自作しようと思う。 先週ちまちまとドット絵を描いたので、それを HSP のウィンドウに描画してみた。 なんかドット絵を作っている最中は、わりと良く思えたのに、 ウィンドウに出してみると何か微妙 (´・ω・｀) ちなみに、キャラは４コマにも描いている大砲ゲーム「お団子キャノン」に出てくるキャラクターだ。 キャラの...
コメントを投稿
続きを読む

LibreOffice Writer 文書の差分 (WinMerge x TortoiseGit) + 社畜PCの原因と対策

お久しぶりです。皆様におかれましてはお風邪などをひかれてはいませんでしょうか。 春と秋だけあればいいのにヽ(`Д´)ﾉとつい思ってしまう SakuraCrowd です。 今日はいつものような製作日記ではなく、ちょっとした役立つメモを書きました。 タイトルにもあるとおり、 TortoiseGit への WinMerge の導入の仕方です。 今まではソースコードくらいしか差分で確認しなかったので、 TortoiseGit 標準の Diff ツールで問題なかったのですが、 LibreOffice の Writer が最近自分の中で便利だと話題になっていて、それを差分表示するためにちょっと調べてみました。 ＃Writer は、文章書いて、ちょっと絵をいれたり表を作るのに便利だと思います。 ＃リッチテキストのエディタを探していて、これが一番よさそうな気がしたので使ってます。 それとブログを書くときはあまり長く書かないつもりだった、 Win7 PC が社畜PCになってしまった際の原因と対策も後半に書きました。割と有用な情報かもしれませんので、時間がありましたらご覧下さい。 まずは TortoiseGit で Writer の odt ファイルを管理して、差分も普通に表示させる方法です。 WinMerge(+plugin) 導入手順 すでに TortoiseGit はインストールしてある前提ではなします。 １．信頼と実績の窓の杜様から WinMerge 日本語版をダウンロードします。 WinMerge - 窓の杜ライブラリ 私の PC は 64 ビット版なのでそちらを選びました。 ２．WinMerge をインストールします。 フォルダを指定し普通にインストールできます。 インストール直前の設定で TortoiseGit をチェックしておくと自動的に TortoiseGit の利用する Diff ツールの設定を置き換えてくれるようです。 これの設定は TortoiseGit の設定の Diff ツールの項目で確認できます。 ３．LibreOffice Writer のファイルを読むためのプラグインをダウンロードします。 ぐぐって出てくる英語版のＤＬサイトは応答がなかったりしましたが、日本...
コメントを投稿
続きを読む