しゃべりながらゲーム制作やってみます #30 タブレットやスマフォ対応

サブアカウントからの動画の引っ越しに時間がかかってしまってなかなか公開できませんでしたが、ようやく #30 を公開いたしました。あと、今回からはメインアカウントのほうに動画を追加していきますので、サブアカウントの動画リストは #29 で終了となります。

今回は PC 上だけではなく、タブレットやスマフォでゲームを動かすことになっても問題ないように対応してみました。まだしばらくは Sliverlight での公開のみとなりますが、一応こんな感じでマルチプラットフォームで動かせるようにしていますよと説明しています。

最近はちーたんタッチボードの改修や動画の移行などやっていたため、ゲーム開発のほうは進んでいません。そのため、次の動画の公開は未定になっていますが、いろいろ落ち着いてきたのでゲーム制作と動画の収録のほうは少しずつ進めていきたいと思います。


Windows タブレット向け ソフトウェアキーボード&マウスパッドアプリ「ちーたんタッチボード Ver 1.00」公開しました

ちーたんタッチボード Ver 1.00 を公開しました。ホームページ側でドキュメント等も一通り更新しましたので詳しいことについてはそちらをご覧ください。

また、アプリケーションの更新に合わせて、ボードパッケージとボード作成 Excel ツールのほうも Ver 1.00 に更新しました。過去のバージョンで作成したボードも引き続き最新バージョンで使うことはできるようになっていますが、特に過去バージョンを使っていないのであれば、最新でそろえておいたほうがいいかもしれません。

バージョンアップの内容は以下の通りとなっています。

ちーたんタッチボード Ver 1.00

追加機能

  • ボードコンテナ定義ファイルの KeyInfo にキーごとの装飾を変更できる Decorates パラメータ追加
  • ボードコンテナ定義ファイルの BoardInfo にキー全体の装飾を変更できる KeyDecorates パラメータ追加
  • ボードコンテナ定義ファイルの BoardInfo にボードの装飾を変更できる BoardDecorates パラメータ追加
  • 設定画面の装飾でボードやテキストの色の有効無効を設定できるようにした
  • 設定画面の装飾でボードやテキストの色をボードコンテナ定義ファイルの色設定より優先するかどうか指定できるようにした
  • 設定画面の動作でアプリケーションの終了確認を表示するかどうか指定できるようにした
  • メニューから指定したボードに直接変更できるようにしました

機能改善

  • マウスパッド、マウススティックのタップ動作においてチャタリングによるクリック停止対応しました(30ms未満)
  • ちーたんタッチボード起動時のパフォーマンスを改善しました
  • 各種ダイアログを可能な限り手元に表示するようにしました
  • 今まではボードの設定ファイルに入力ミスなどがあった場合、起動時に強制終了していましたが、Ver 1.00 からは強制終了せず、対象のボードを選択したときにエラー表示にしました

仕様変更

  • ボードコンテナ定義ファイルでの画像の伸縮を決定する「ImageRenderMode」を「ImageStretchMode」に変更しました。「ImageRenderMode」は現バージョンでまだ使用できますが、今後廃止されます。
  • メニューからの終了以外の終了方法でも確認ダイアログを表示するようにしました。終了確認ダイアログが表示されるかは設定で変更できます

不具合修正

  • 設定画面などのダイアログでキーボード操作するときに現在のフォーカスが見えなかった問題を修正しました
  • OS が中国語環境の時に起動したとき、表示言語が中国語になっていなかったのを修正
  • 一部の環境で設定画面のチェックボックスのチェックが見えなくなる現象に対応しました
  • マルチディスプレイ使用時に起動したディスプレイによって設定画面などが別のディスプレイに表示されてしまう現象を修正しました。ただし、判断が難しい一部の状況については未対処です。

ボードパッケージ Ver 1.00

全般

  • 英字、数字、記号のキーのフォントサイズをやや大きくした

通常レイアウト (Normal)

  • キーの表示テキストを Shift 押下中、IME の状態によって変化するようにしました。これにより、初期状態のテキストも変わります
  • IME の状態によってひらがな表示ができるようになったため、ひらがなを初期表示したキーを定義したボードを削除しました

親指用レイアウト (Thumb)

  • キーの表示テキストを Shift 押下中、IME の状態によって変化するようにしました。これにより、初期状態のテキストも変わります

マウスパッド (MousePad)

  • 右側のボードの各ボタンとマウスパッドの上下位置を入れ替えました
  • 片手用マウスパッドを追加しました。(左手用、右手用)
  • 使用頻度の高いキーを加えたマウスパッドを追加しました。(左手用、右手用)

ボード作成 Excel ツール

追加機能

  • ボードの装飾詳細設定シート「BoardDeco」追加
  • キーの装飾詳細設定シート「KeyDeco」追加
  • ボード作成のサンプルファイルを18ファイル追加

機能改善

  • setting ファイル生成の処理速度を高速化しました
  • 実行環境の DPI を考慮してレイアウトのサイズを計算するようにしました。これにより PixelPerCentimeter のパラメータを削除し、DPI による出力結果の差異が少なくなるよう自動的に処理されるようになりました

仕様変更

  • ボード、キーの「ImageRenderMode」のパラメータ名を「ImageStretchMode」に変更

また、ボード作成 Excel ツールでは、配布しているボードパッケージの元 Excel ファイルの他に、機能ごとに小さく分割した参考用 Excel ファイルも 18ファイル程追加しました。作成する際の参考にしてみてください。

531_KeyExtendDecorateSample_1_00_Ja 532_KeyImeDecorateSample_1_00_Ja 533_KeyPressDecorateSample_1_00_Ja 515_TransparentImageBoardSample_1_00_Ja


Windows タブレット向け ソフトウェアキーボード&マウスパッドアプリ「ちーたんタッチボード Ver 0.32」公開しました

以前予告したとおり、不具合修正を行った Ver 0.32 を公開しました。修正内容は以下の通りです。

  • キーが押下されている状態でちーたんタッチボードを終了しようとするとエラーが表示される現象
  • Shift や Ctrl キーを押してトグル状態にしているときに反対側の Shift や Ctrl を押してトグルを解除しようとすると意図しない挙動になる現象

Ver 0,40 については現在開発を進めていますのでもうしばらくお待ちください。


[予定] Windows タブレット向け ソフトウェアキーボード&マウスパッドアプリ「ちーたんタッチボード Ver 0.40」について

Ver 0.30 では主に操作面についての機能改良を行っていましたが、Ver 0.40 では見た目に関連する機能の改良を行う予定になっています。逆の見方をすると見た目に特にこだわらないのであれば、Ver 0.30 と Ver 0.40 ではほとんど機能に違いはありません。

まだ開発段階なのですが、変更点について画像付きで紹介したいと思います。なお、画像は動作確認用のものなので、実際にリリースされるものとは異なります。

まず、基本的なイメージはこんな感じになります。

2015-02-11 23_25_18-無題 _ - EmEditor

部分的にしか変えていないのでわかりにくいかもしれません。

まず数字の部分なのですが枠線の太さを変えられるようにしました。0 のキーのように枠線の太さを 0 にすることによって枠線を消すこともできます。

Enter キーのところを見るとキーの背景色、フォント、テキストカラー、枠線の色をそれぞれ変えられるようになっていることが分かります。

Tab キーのところを見ると画像とテキストを表示させていることが分かります。今までのバージョンでもできていましたが、ここでは今回の拡張機能によって実装しています。

ではここで Enter キーを押してみます。

2015-02-11 23_25_28-無題 _ - EmEditor

テキストの色、フォント、枠線の色、枠線の太さが変わったことが分かります。このように押したときの装飾も任意に設定することができるようになっています。押しているキーを目立たせたいときに使うと便利かもしれません。

続いて IME を ON にしてみます。

2015-02-11 23_26_28-無題 _ - EmEditor

ボードの色が変わりました。これ自体は今までと変わりませんが、Ver 0.40 からは IME の種類によって装飾を変更することができるようになります。例えば全角英字や半角カタカナ、また、ローマ字入力やかな入力でも変えることができます。

言語バーから IME の状態を変えてみました。ボードだけではなくキーも個別に IME の状態によって装飾を変えることができます。次の図では Shift キーの文字の大きさとフォントを変えています。表示テキストも変えられるので、例えばかな入力のときはキーの文字をひらがなにすることもできます。

2015-02-11 23_27_08-無題 _ - EmEditor

IME に応じてボードの色だけではなく画像を表示したり枠線を変えることもできます。

2015-02-11 23_26_51-無題 _ - EmEditor

次に Ctrl キーを押してみます。

2015-02-11 23_29_40-Greenshot

ボードの枠線の色と太さが変わりました。このように修飾キーを押しているときに、いまどのような状態なのかをさらにわかりやすくすることもできます。

もちろん修飾キーだけではなく通常のキーでもボードの装飾を変えることができます。次の図ではスペースキーを押している間は枠線を黄色にしています。

2015-02-11 23_32_07-無題 _ - EmEditor

次に Shift キーを押してみます。

2015-02-11 23_34_07-無題 _ - EmEditor

ちょっとわかりにくいですが、数字のキーの文字と色が変更されています。これができると、例えば通常はキーに小文字の英字が表示されているけど Shift キーを押している間は大文字で表示できる、などができます。一応この機能は標準のボードに組み込もうかなと思っています。

この機能も修飾キーだけではなく通常のキーに適用することができます。次の図では U キーを押しているとき、Tab キーの背景と文字の色を反転、さらに画像を切り替えています。

2015-02-11 23_34_45-無題 _ - EmEditor

これらの設定はすべてボード側の設定で行います。JSON テキストを直接編集してもかまいませんが、そこそこ複雑な構成になっているので別途用意するボード作成ツールを使った方がいいかもしれません。

Ver 0.40 の新機能はこんな感じです。透過画像や背景色の透過も使えるので、作りこめば割と自由な装飾を作ることができるかと思います。一応 Ver 0.40 公開あたりにボードの簡単なサンプルも配布しようかと思いますので、わかりにくければそれを参考にするのもいいかもしれません。


[予定] Windows タブレット向け ソフトウェアキーボード&マウスパッドアプリ「ちーたんタッチボード Ver 0.32」について

現在公開している Ver 0.31 で2点不具合を発見したのでその修正版を近いうちにリリースする予定です。修正内容は以下の2つになります。

  • キーが押下されている状態でちーたんタッチボードを終了しようとするとエラーが表示される現象
  • "Shift や Ctrl キーを押してトグル状態にしているときに反対側の Shift や Ctrl を押してトグルを解除しようとすると意図しない挙動になる現象

エイッとウォーズ専用ページ作成とそのほかもろもろ製作についての雑記

先週 Windows ストアに「エイッとウォーズ」を公開したとブログに書いたのですが、そのときスマフォしか持ってなかったので詳しいことは後で書こうと思いつつ今になってしまいました。

アプリだけ公開すればいいのですが、せっかく作ったゲームなので専用ページも作成しました。以下のリンク先から見れると思います。

こっからは製作についての経緯とか感想とかもろもろ雑記になっていますが、結構長文になってしまいました。書くのが割と苦手なので始めはうへーと思いながらいざ書いてみたらこんな結果に(^^;)。雑記の部分については専用ページにも転載しています。

雑記

登場キャラクターからもわかる人はいるかと思いますが、このゲームは「エイっと作ろう! Windows ストアアプリ選手権」でアプリを出してみようを思って作ってみたゲームです。この企画自体は前々から知っていたのですが、その時点では「へー」程度に思っていただけで特に作ろう、というような考えはありませんでした。まあ別件でやっていたこともあったので。

とか言いつつも、なぜかしょう子の絵を描いてたりしてました。アプリ作らずに絵を描くという謎行動。この時点でもやはりアプリを作ろうとは全然考えていませんでしたね。ちなみに絵はpixivにあげています。(以下のリンク先)

で、ふとアプリを作ってみようと思い立ったのが2013/5/6(月)あたり(しかも午後あたり)。どんなゲームにするかもまだもやもやしていた感じだったと思います。当選手権の締め切りは5/12(日)で、「アプリがストアに公開されている」ことが条件らしかったです。

時間がなかったので画像やBGMなどは素材屋さんからお借りすることにし、自分はプログラムを中心に制作しました。素材をお借りするといってもゲームに合わせないといけなかったのでいろいろ調整はいたしましたが。まあでもこれは半日ぐらいでなんとかなりました。

プログラムの方なのですが、実はこっちの方が難題であり、ゲームを作るという風には考えていたのですが、Windows ストアアプリでゲームを作る場合、標準で対応されているのが「C++ & DirectX」のみになっていてそれしか選択肢がありません。まあ、C# + XAML や Javascript + HTML でゲームっていう選択肢もありますが、こちらは高度なゲーム制御ができなく、目的のゲームを作りきることができるのかまったく未知数でした。

正直 C++ + DirectX で今から API 調べながら作るのはさすがに時間的に無理だろうと思い、いきなり挫折しそうになっていたのですが、ちょうどそのころ赤坂怜音さんが「MonoGame」の記事を書いており、プログラムがほぼ XNA と同じコードで作れるというのを知ったのでこれで作ってみることにしました。軽くサンプルを作ってみたのですが、割とそのまま動いたのには驚きました。

XNA と同じ形で作れるといってもライブラリとか作ってたわけではないのでほとんど1から書き起こしでプログラムを書いていきました。基本的にはほとんど意図したとおりに動かすことはできたのですが、一部動かない、使えない、意味不明なエラーがでるなどの現象に遭遇するので、MonoGame で作られる方は注意したほうがいいかと思います。Web で情報を検索しても日本語サイトの情報はほぼ皆無ですし、英語圏でも見つかるかどうかというレベルです。MonoGame を使う場合は、自力で解決できる方のみの方がよろしいでしょう。

そんなこんなあって完成したのが5/12(日)のお昼あたりです。プログラム作るのに3日、ゲーム調整に2日ぐらいでしょうか。期間的には6日ぐらいですが、平日は普通に仕事をしていたので作業時間は実質30時間ぐらいでしょうか。細かくカウントしていたわけではないのでちょっとあいまいです。寝ないと生きれない人間なので徹夜とはしないで普通に寝て生活してました。

わかる方はもうおわかりかと思いますが、ゲーム自体はできているにも関わらず、この時点ではまだストアの方には上げていません。ストアに上げるための審査には2日~5日ぐらいはかかるといわれているので、もうこの時点でゲームオーバーです。選手権に参加していない理由はこれなんです。実際には1回審査ではじかれたので、もともと時間的にだめだったのですが…。

とまあこんな感じでできたゲームなのですが、無料で公開してますので Windows ストアアプリを動かせる方はぜひ遊んでみてください。1日ぐらいあれば全ステージクリアできると思います。ステージごとにセーブはされますので、1日1ステージな感じでちょっとずつ遊んでみるのもいいかもしれません。Web からは以下のリンク先、ストアでも「エイッとウォーズ」で検索できると思います。

公開しているバージョンについて

この記事を書いている時点でWindows ストアに公開されているエイッとウォーズのバージョンは「1.00」になっています。現在 Ver 1.01 を申請中で、これが通った場合、以下の機能が追加されます。

  • ステージクリア後にスコア表示
  • 各ステージのベストスコア画面追加
  • クリア済みのステージ選択 (全バージョンは前にのみ戻れたが、Ver 1.01 は双方向可)
  • プレイヤーレベル選択 (ただし条件を満たす必要あり)
  • ステージクリア後、同じステージを再挑戦できるようにした
  • クリアスコアを Twitter につぶやき (IE起動)
  • アプリのファイルサイズを10%程度縮小

エイッとウォーズ専用ページに書かれている内容は Ver 1.01 についての内容なのでご注意ください。上記の機能付きで遊びたい方は少々お待ちいただければと思います。


今出しょう子「描くなら今でしょ!」

久々にイラスト描いてみました。元ネタは @ITの企画「エイっと作ろう! Windows ストアアプリ選手権」のキャラクター「今出しょう子」からです。思い立ったなら今、描くなら今でしょ!思案で突発的に描いてみました(^^;)。アプリは作んないで絵を描いてるっていうのもなんかおかしい気がしますが、気にしないことにしましょう。

イラストはブログに載せないでリンクだけ載せておきます。RSSなんかで突然出てきても困る人もいるかもしれないですし。