2013年9月30日月曜日

HTML5 Audio でマルチブラウザ対応するときの注意

HTML5 の <audio> を使ってマルチブラウザに対応する場合には2種類の音声ファイルを準備する必要があります。
先日の Google 生誕16周年の記事でも書きましたが現状では mp3 と ogg ファイルの準備が必要です。

各ブラウザの Audio 要素の対応フォーマット一覧を見てみると、
Safari, IE は ogg ファイルを、Chorme, Opera, Firefox は mp3 ファイルを再生できません。
これらのブラウザで音声を再生する場合は両方とも設定する必要があります。
http://fmbip.com/litmus/



ブラウザゲームなどを開発する場合は mp3 と ogg 両方とも準備しましょう。
今後はアップデートによって ogg のみ、 mp3 のみでも再生できるようになるとよいですね。

2013年9月29日日曜日

enchant.js が 0.8.0 へアップデート

enchant.js がバージョン 0.8.0 にアップデートされました。
http://enchantjs.com/ja/2013/09/enchantjs-080/


バージョン 0.8.0 では Nintendo Web Framework 対応がなされているそうです。
Nintendo Web Framework は WebKit ベースで HTML5, JavaScript, CSS で作ったゲームを Wii U などの Nintendo のハードで動かすことができるそうです。
ブラウザのエンジンを使って単体のゲームを遊ぶ感じになるのでしょうか。
Nintendo Web Framework - Nintendo


マルチデバイス対応では Unity と ブラウザゲームが有力そうですね。

2013年9月28日土曜日

Xcode のインタフェースがフラットデザインに

先日 Xcode を 4 系から 5 系にアップデートしたんですが、細かいところがフラットデザインに変わっていました。


5



4
5



4
5

4 系では立体的なボタンが多かったのですが、5 系では平面的で境界線がなくなっていますね。iOS 7 のフラットデザインは特徴的で印象に残っていましたが、Mac OS 側にも適用されているとは思っていませんでした。Mac 側も iOS7 に合わせてフラットデザインに変わっていくのでしょうか。

2013年9月27日金曜日

Google 生誕15周年記念ゲーム

本日は Google 生誕15周年だそうで、Google のトップページでゲームが遊べます。
棒で星を叩いてキャンディをゲットするゲームです。

何回かやってみましたが、棒の先端で叩くとたくさんキャンディが出てくるような気がします。最高記録は 171 個でした。



HTML5 Canvas を使ったゲームのようです。BGM は <audio> ですね。どのブラウザでも再生できるように mp3 ファイルと ogg ファイルが使われています。HTML5 Audio はまだ主要ブラウザで共通して再生できる形式が存在しないため、mp3 と ogg の両方を載せる必要があります。Safari と IE は mp3 を再生できるけど ogg を再生できず、Chrome、Firefox、Opera は ogg を再生できるけど mp3 を再生できません。
参考: HTML5 Audio Codecs



ゲームの JavaScript はこちらですね。
https://www.google.co.jp/logos/2013/bday13/bday13.js

難読化されていますが、jsbeautifier などの整形ツールを使えばインデントなどを入れてくれるので若干読みやすくなります。

ちなみにスマホでも遊ぶことができ、インタフェースの画像が若干変わります。細かいところまで凝ってますね。




2013年9月26日木曜日

好きな値段で Android ゲームが買える Humble Mobile Bundle 2

インディーズゲームをまとめて販売する Humble Bundle シリーズの新しいパック Humble Mobile Bundle 2 が販売されています。Android 端末向けのゲームが 6 本セットになっており、これまでの Humble Bundle と同じく自由な値段設定で購入することができます。販売期限は残り 2 週間です。

Humble Mobile Bundle 2 紹介動画


収録されているゲームは以下の通りです。
ただし、そのうち2本は 4.53ドル以上で購入した人だけが遊べます。

Star Command (新作)


Time Surfer (新作)


Punch Quest


Bloons TD 5


Ravensword: Shadowlands (4.53ドル以上)


Carmageddon (4.53ドル以上)

サポート端末リスト(作成中だそうです)
http://support.humblebundle.com/customer/portal/articles/1207109-supported-devices---humble-mobile-bundle-2


基本的に 4 本のゲームが必ず同梱されており、
4.53ドル(約445円)払うと更に 2本 追加されて、6 本のゲームが遊べるようになります。

購入方法

Humble Mobile Bundle2 を開く



いくらで買うか決める
$10 以下で買う場合は、Custom Amount から細かい値段を入力します。



払った値段のうち、いくらを開発者に、いくらを募金に回すかを選択します。
募金は Child's PlayElectronic Frontier Foundation に回されます。
Child's Play は、病院で治療中の子どもたちが欲しがっているゲームやおもちゃ、本などを購入してプレゼントしている団体です。これによって周囲の人々とのコミュニケーションの促進や、治療に関する不快な経験からの気分転換などを目指しています。
Electronic Frontier はコンテンツを著作権侵害から守るための法律を作るための活動や、教育活動を行っている団体です。
Hable Tip とは Humble Bundle を提供する Humble に渡るお金です。




メールアドレスを入力します。



ギフトかどうか選択します。
ギフトにすると他者へアプリをプレゼントするためのコードが購入できます。


支払い方法を選択します。
クレジットカード、PayPal、Amazon payments、Google、Bitcoin から選択できます。


支払いが完了するとこんな画面が出てきます。
CLICK HERE をクリックしましょう。



後は、画面の指示に従ってアプリをダウンロード・インストールすれば OK です。

2013年9月25日水曜日

各ブラウザの開発ツールで HTML 要素を調べる方法

以前、Safari のデバッグツールを使って HTML の要素を調べる方法をご紹介いたしました。今回は主要なブラウザの最新バージョンを使って同じことをする方法をご紹介いたします。

IE10
F12キーで開発ツールを出し、マウスカーソルのアイコンをクリックすることで、要素を調べることができるようになります。


Firefox
Shift + Control + I で開発ツールを出して、マウスカーソルのアイコンです。
以下の画像は標準のデバッグツールですが、Firebug でも同じアイコンです。


Chrome
Shift + Control + I で開発ツールを出し、虫眼鏡のアイコンをクリック。
ちなみに、Opera は Chrome と同じ開発ツールだったため同じ操作です。


Safari
Shift + Control + I で開発ツールを出し、虫眼鏡のアイコンをクリック。



2013年9月24日火曜日

Blogger に投稿した画像が全て消えた

ブログに投稿していた過去の画像がすべて消える現象が発生しました。

4月から毎日ブログを書き続けて半年近く経つのですが、
それまでのすべての画像が表示されなくなってしまいました。
原因は今のところ不明です。

画像ファイル自体は、Blogger上に残っているようなので、
すべて手入力で修正することも可能ではあるのですが、
だいぶ時間が掛かりそうな上に、また消えてしまうかもしれません。

もし、解決できなかった場合は別のブログサービスへの移行も考えています。
プログラミングなどの HowTo を検索していらっしゃった方には、
ご迷惑をおかけして大変申し訳ありません。

過去の画像については、対策が見つかり次第、修正いたしますので今しばらくお待ちください。
もしほかのサービスに移行する際も、改めてご連絡いたしますのでよろしくお願いいたします。

2013年9月23日月曜日

iOS7 でコントロールセンターが暴発する

iPad を iOS7 にアップデートしたのですが
コントロールセンターの暴発が気になりました。

Youtube で動画リストをスクロールしようとすると、
画面下からコントロールセンターが出現してしまうことがありました。

設定でアプリ内からのコントロールセンター呼び出しを無効化できます。

App内でのアクセスをOFFにする


これでアプリ使用中にコントロールセンターが暴発することはなくなります。
ただ、今度はホーム画面に戻らないとコントロールセンターが出せないんですよね。

今のところ、指4本で画面を上にスライドしてマルチタスク画面を出して、
ここからコントロールセンターを呼び出しています。

一旦マルチタスク画面に行ってから呼び出す


今までどおり、指4本ジェスチャでコントロールセンターを呼び出せれば、
とても便利なんですが・・・アップデートされないかな。

2013年9月22日日曜日

アイテムを設置する

Hammerwatch エディタでアイテムを設置する方法です。

Items パネルを開きます。
Alt + 5 でも開けます。


樽や木箱、宝箱などの壊すとアイテムが出てくるもの、
回復アイテムやポーション類、
鍵や爆弾などものアイテムとして登録されています。
また、鍵で開けることができるドアもアイテム扱いです。

敵を倒すと出現するアイテムなどはすべてスクリプトで生成するのでここでは配置しません。
ここで配置するアイテムは最初からマップ上に存在しているアイテムだけです。



2013年9月21日土曜日

ステージ全体の環境光、影を指定する

Hammerwatch エディタで環境光、影の設定方法です。

Lighting パネルの Ambient, Shadows でステージ全体の環境光や色を設定できます。
暗いマップや明るいマップを作りたいときに使います。



Ambient の右の四角をクリックすると、ステージの環境光を設定できます。
画面全体に色を付けることができます。
Ambient を黒にすると夜のような暗いマップに、白くすると昼のような明るいマップが作れます。

Ambient を赤にした場合

Shadows の右の四角をクリックすると、物体にできる影の色を指定することができます。
影を黒くすると濃い影に、白くすると薄い影になります。

Shadows を緑にした場合


2013年9月20日金曜日

物体の配置

現在、画像が消える現象が起こっております。
後日原因を究明して画像をアップロードし直すのでしばらくお待ちください。

Hammerwatch で物体を鉢する方法です。

ダンジョンの壁や飾り、クリーチャーの死体など様々なものが置けます。
お店は Characters ではなく Doodas です。

Doodas パネルを開きます。
Alt + 2 でも開けます。




壁を配置するときは theme_a, theme_b, theme_c, theme_d から選びます。
それぞれキャンペーンの Act1, Act2, Act3, Act4 で使われているものです。
よく使うのは h_16, h_8, v_16, v_8, crn, vendor などです。

一部の物体は状態を持っています。
例えばスイッチなら「押されている/いない」、炎の床なら「燃えている/いない」などです。
これらはスクリプトで操作するためここでは指定できません。
また、表示/非表示、当たり判定の有無などもすべてスクリプトから操作します。

うまく組み合わせてダンジョンを作りましょう。


2013年9月19日木曜日

タイルマップの設置

Hammerwatch でタイルマップを設置する方法です。

まず Tilemap パネルを開きます。
エディタの右側の Tilemap タブをクリックすればOKです。(デフォルトで開かれています)
メニューの Layers -> Active Layer -> Tilemap を選択、または Alt + 1 でも開けます。



リストの中から設置したいタイルマップを選んで、ドラッグすると配置することができます。



マウスの右ドラッグで設置したタイルマップを削除できます。
ただし、削除できるのは現在選択中のタイルだけなので注意してください。
消したと思ったら消してなかったということが結構あります。

タイルマップはいくつか重ねて塗ることができます。
例えば、a_default.xml の上に a_scattered.xml を塗ることができます。
このとき、下のタイルマップはそのまま残っており、上のタイルマップを消すと姿を表します。
タイルマップ名のチェックボックスを外すと非表示にできるので、重なっているかどうかはここで確認可能です。

Brush でタイルマップの塗り方を変えられます。
細かいところを塗るときは小さく、おおまかに塗るときは大きくしましょう。
サイズを大きくして1回クリックすると大きな円形を描くこともできます。




画面外にはみ出たときは WASD キーで画面をスクロールしたり、マウスホイールで拡大縮小してください。

Brush の Hardress でブラシの輪郭をぼやけさせることができます。
0 ~ 100 までで設定できます。

Hard = 0

Brush の Alpha でタイルの透明度を設定できます。
1 ~ 100 までで設定できます。

Alpha = 1

Erase をチェックすると左ボタンで削除、右ボタンで塗るに切り替わります。使いません。

Brush をうまく組み合わせるとグラデーションの効いたマップを作ることができます。


2013年9月18日水曜日

敵キャラの配置

Hammerwatch のエディタで敵キャラを配置する方法です。

Characters パネルを開きます。
Alt + 4 でも開けます。



配置したいキャラクタを選択して、右クリックで配置します。
物理演算が働いており、同じ場所に連打しても、重ならずに広がります。
検索ボックスでクリーチャーを検索できるので、ある程度名前は覚えておくと便利です。
メニューの Layers -> Rendered Layers -> Characters で表示を ON/OFF できます。
Shift + F4 でも可能です。

敵キャラを配置

キャラクタ一覧を作成しました。
どのワードで検索すればヒットするのか書いてあります。
ダウンロードしてお使いください。


2013年9月17日火曜日

ライトの設置

Hammerwatch エディタでライトを設置する方法です。

エディタの右側ににあるパネルの右上に矢印ボタンがあります。
これをクリックして Lighting パネルを表示します。
メニューから Layer -> Active Layer -> Lighting を選択しても同じです。
Alt + 6 を押しても同じことができます。



その状態でマップを右クリックするとライトを設置することができます。


設置したライトは Lighting パネルを表示している時だけ左クリック、またはドラッグで選択できます。Lighting パネルを開いていないときは選択できないので注意してください。

パネル内の Multiplicative colors でライトの色を設定できます。
左から順番に内側、中間、外側の色を設定できます。
すぐ下のゲージでライトの範囲の大小を変えることをできます。


内側が赤、中間が緑、外側が青のライト

Adittive colors でライトの色に更に追加で色を付けることができます。
これは Multiplicative color の範囲の内部に、更に円形に色を指定することができます。
Multiplicative color の範囲内に追加するため、Multiplicative color の範囲が 0 の場合は無視されます。
Multiplicative color と同じように、内側、中間、外側の色を設定できます。
Multiplicative color で広い範囲を照らしたあと、その内部に更に色を付ける場合に使います。
例えば、松明が照らす広い範囲を Multiplicative color で設定して、松明付近の色だけ Adittive color で別途設定する場合などです。


Multiplicative color 内に赤、青、黄色の Adittive color

エディタ画面ではライトを置かないと暗くてよく見えません。
そういうときはライトのレンダリングをオフにすると画面全体が明るくなります。
メニューの Layers -> Rendered Layers -> Lighting でレンダリングをON/OFFできます。
Shift + F6 でも同じことが可能です。

ちなみにライトや影は、ゲームのオプションで Lighting, Shadows を ON にしなければ表示されません。スペックの問題で OFF にしている人もいるので非表示でも遊べるように注意しましょう。

2013年9月16日月曜日

エディタの起動

Hammerwatch のエディタを起動する方法です。
Steam から Hammerwatch を起動するときに "Launch Editor" を選択します。
この選択肢は Windows の場合だけ表示されます。



以下の様な画面が表示されます。これがエディタです。
PC のスペックが足りない場合、起動せずにエラーが発生する場合があります。



ちなみにエディタのプログラムはデフォルトで
C:\Program Files\Steam\SteamApps\common\Hammerwatch\editor
にあります。

この中の HammerwatchEditor.exe がエディタ本体です。
実際にはこちらを直接起動することが多いので、
フォルダはデスクトップにショートカットを作っておくとよいでしょう。