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

声あり４コマ漫画あり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の珠音ちゃん賞の１つに選ばれました。
ありがとうございます。


ラベル:

コメント

コメントを投稿

このブログの人気の投稿

GrimDawn クロンリーの幹部という名もなき賞金首

 賞金首を倒すのは、短時間で何か達成するにはちょうどいいミッションだ。 今までのバウンティのクエストには、ターゲットのいる場所などが書かれていたのだが、今回はクロンリーの幹部３人を倒せというもの。 今までは、賞金首に名前があったが、幹部３人という表現は何なのだろうと思った。 ３人もいるから文章を短縮するために名前を端折ったのか。 それに場所も書かれていないので、ウィキを見たのだけど、よくわからなかったので、とりあえずクロンリーの隠れ家にリフトで移動した。 クロンリーの隠れ家の入り口あたり 隠れ家周辺の可能性もあるけど、クリスタルを埋め込まれたということは、かなりクロンリーの近くにいる気がする。 クロンリーの隠れ家には数体、 HP バーの左右にドクロマークがついているヒーロークラス のやつらがいるので、そいつらのことかもしれないと思った。 一番上にマーティンとか名前がついてるから幹部かなと期待したけど違った そして、マーティン（幹部かなと思ってた）と戦っていたら、いきなり、幹部を倒したというメッセージ。 マーティンは幹部じゃなかったし、いつ幹部をやったかは不明 どうやら、よく見るとたまに MOB っぽい敵の中に幹部と書かれている敵がいるのでそいつらを３体やればよいということらしい。 道中でいつの間にか幹部を３体倒してミッションもクリアしたので、ついでにクロンリーを倒してきた（まだやられそうになりながらだけど、たまに逃げたりしながら時間を数分かければ勝てる）。 クロンリーの隠れ家のマーティンのように名前もなく、「幹部」という肩書だけのＭＯＢ。 幹部はもちろん それなりに偉いんだろうけど 、名前もなく、いつの間にかやられるところに、 むなしさを感じた賞金首たち だった。 名前は大事だな。あと雑魚と一緒にしなない程度のタフさがあればよかったのかなと思う。 そろそろストーリーをすすめたいが、いろいろあって、短時間しかできない。 あと、いい装備がでてこなくなってきたのでモチベーションが下がり気味なこともある。 飽きる前に、 Act4 まではすすめたい。 つづく
コメントを投稿
続きを読む

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