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

声あり４コマ漫画あり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):
コメントを投稿
続きを読む

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 のファイルを読むためのプラグインをダウンロードします。 ぐぐって出てくる英語版のＤＬサイトは応答がなかったりしましたが、日本語版は大
コメントを投稿
続きを読む

QWidget の選択時のデザインを CSS で変える方法

ひさびさに書きやすいネタができたので、１ヶ月ぶりくらいに書きます。 ここ１ヶ月の作業内容 タイトルのとおりなのですが、 テーマがいきなりマニアックでとまどったり、 デスチェリー農場の続編はどうしたんだよおおおお！ とか新作を楽しみにしている生命が宇宙のどこかにいるかもしれないので あらかじめ書いておくと、 ここ１ヶ月は日記ソフトを作ろうと python + pyside + sqlite の勉強をしていました。 勉強というか、ウィンドウ起動から初めて、 GUI をせっせと作ったり、ファイル保存と復元を作ったりしてます。 Copy & Paste や Redo/Undo など未実装の処理も多くあります。 今回は、タブ遷移とかクリックで選択されたウィジェットの、 背景色が変わるとか、 枠線が出るとか そんな設定を CSS で実現します。 PySide と CSS について PySide は前も Raspberry Pi 2 で使う mount コマンドの GUI ツールで使いました。 Python の GUI フレームワークです。 さすがに HSP ほど簡単にウィンドウを出すことはできませんが、 かなり楽だし、 GUI の種類や機能もかなり充実しています。 ある程度 GUI を作っていて、 こんな露骨なウィンドウだと受けが悪いんじゃないかな と思いました。 なんか今っぽいおしゃれなデザインにしたい。 そんな誘惑にかられて調べていると、 CSS でお手軽にデザインを変更 できることがわかりました。 QWidget 派生のオブジェクトを作る際に、 setStyleSheet(str_css)で css を読み込ませることで簡単に実現できます。 次の例では file.css というファイルに書いた css を QWidget 派生クラスのオブジェクトに読み込ませます。 # css の読み込み with open("file.css","r") as f:     self.setStyleSheet("".join(f.readlines())) いろいろな G
コメントを投稿
続きを読む