Monthly Archives: 6月 2014

[WebGL] WebGLをはじめてみる

HTML5の登場により、Webブラウザ上で動的なコンピュータグラフィックを描画できるようになったことはとても衝撃的です。
たとえば、以下に記すリンク先のコンテンツは全てWebブラウザ上で動いているものです。

http://www.ro.me/

上記サイトはデンジャー・マウスとダニエル・ルッピによるCDアルバム「ROME」のプロモーションサイトという位置付けなのですが、とてもプロモーションとは思えないくらいに凝った作りになっています。
何より、サイト上でここまでの3D表現が出来るのはインパクトが大きいでしょう。

このようにWeb上で3DCGを描画するのにはWebGLという技術が用いられています。

WebGLとはOpenGLと呼ばれるグラフィックライブラリがベースになっています。
OpenGLとはSGIによって開発されたWindowsやMac、Linuxなど様々なPC環境で動くクロスプラットフォームなライブラリです。

近年では、PCだけにとどまらずスマートフォンやタブレット端末などの組み込み機器上でも利用できるように仕様変更されたOpenGL ESが登場しました。
WebGLはOpenGL ES 2.0をベースにWebブラウザ上で使えるようにしたものです。

したがって、WebGLを使ったグラフィックの描画では、OpenGLで用いられているAPIが用いられます。
OpenGLを使ったことのある人なら馴染み易いと言えるでしょう。
グラフィックの描画はOpenGL同様GPU側で行うため高速です。

次回からは実際にWebGLを使って簡単な導入プログラムを作ってみたいと思います。

■参考サイト
デンジャー・マウス&ダニエル・ルッピ『ローマ』の映像がすごい

■参考書籍
酒井 幸市(2013)『WebGLによる3D-CGアニメーション』工学社

[Block Shooter] Webリメイク版ほぼ完成

先週くらいから取り掛かっていたBlock ShooterWeb版へのリメイクが一通り終わりました。
公開はまだこれからです。

bsu-1
bsu-2

今まではWindows用実行ファイルのみの配布でしたが、
今回はWebブラウザ上で遊べるようになったため
ダウンロードせずにサイト上で手軽に遊べるようになっているところが大きな違いです。

他には、ゲームオーバー時にTwitter上にスコアを投稿できる機能を付けたり、
ゲームの難易度を少し下げたりと若干の仕様変更が加えられています。

もっとも、以前のソースコードを紛失してしまったため、
同じ動きを完璧に再現するのは難しい状態ですが・・・(笑)

サイト上に公開ページを設置したらまたお知らせしたいと思います。

[Unity] protectedやprivateなフィールドをインスペクタから見れるようにする

UnityのスクリプトをGameObjectに追加すると、publicなフィールドをインスペクタから編集することができます。
以下のような設定項目は基本的にpublicなフィールドに指定する初期値を入力する画面です。

insp-invisible

一方、protectedやprivateなメンバはインスペクタから参照することができません。
しかし、時と場合によってはインスペクタから初期値を指定できたほうが便利でもあります。

参照する方法は簡単。
フィールドの前に[SerializeField]を付ければOKです。

変更前

変更後

これで、以下のように編集可能になります。

insp-visible

インスペクタにつく名前は自動的にパスカル形式になり、区切りの間にはスペースが挿入されるようになるんですね。
GUI上で見る場合はこちらのほうが見やすいため、地味にありがたい機能でもあります。

[Unity] [NGUI] スクリプトからAtlasのスプライトを変更する

NGUIでスプライトをスクリプトから動的に変更するときに嵌ったメモです。

NGUIでは、スプライトはUISpriteコンポーネントで管理します。
あらかじめAtlasで作成したスプライトは、UISprite.spriteNameで設定できます。

しかし、スプライトのサイズは変更されません。
たとえば、小さなスプライトから大きなスプライトに変更すると、サイズが縮小された状態で描画されてしまいます。

したがって、スプライトの変更後にサイズも合わせて変更したい場合は一工夫する必要があります。

上記操作を行うスクリプトは以下のような形になります。

変更後のスプライトサイズに合わせてUISpriteのサイズを変更するために、
まずサイズの指定元と指定先のコンポーネントを取得します。

UISpriteDataのwidth、heightフィールドに変更後のスプライトのサイズが格納されています。
そして、サイズの指定先となるUIRectコンポーネントをspriteから取得します。

サイズをそのまま変更してしまうと、スプライトの座標がおかしくなってしまうため、
一時的に保存してあとで戻すようにします。
サイズの変更はUIRect.SetRect()メソッドにて行います。

これで、サイズもスプライトに合わせて反映されるようになりました。

[Unity] スプライトをフェードアウトさせる

Unity上でスプライトを徐々にフェードアウトさせる方法についてのメモ書きです。
これは簡単な爆発エフェクトなどに使えます。

スプライト描画を行うコンポーネントはSpriteRendererであり、この中にColorフィールドがあります。
Colorフィールドはスプライトの絵を貼り付ける下地となる紙のようなもので、この紙の色を自由に設定できます。
デフォルトは白色なので、スプライトの絵がそのままの色で貼り付けられるようになります。

Colorには透明度(=αチャネル)も指定することができます。
したがって、このαチャネルの値を変更ことで半透明のスプライトを表示したり、透明度を変化させることも可能です。

今回はこの機能を利用してスプライトをフェードアウトするスクリプトを書いてみました。

上記スクリプトをフェードアウトさせたいGameObjectに追加すると、指定された時間でフェードアウトして最後には消滅します。

まずSpriteRendererコンポーネントを取得し、

Update()メソッドの中でSpriteRendererのαチャネルを更新します。

αチャネルを含め、色の各成分の取り得る範囲は0~1です。

完全にフェードアウトしきったら、自身をDestroyしてシーンから消滅させます。

これで冒頭で述べた動作を実現できます。

今回はSpriteRenderer限定ですが、この処理を少し応用すればマテリアルなどのフェードアウト処理も実現できます。

[ゲーム制作] Block Shooter リメイク中

今週明けからWebサイトに公開中の自作ゲーム「Block Shooter」のリメイクに取り掛かっています。
リメイクと言ってもデザインやゲームシステムには変化は無く、Webブラウザ上で遊べる形にしようという計画です。

今まではWindows用の実行ファイル形式のみで配布していましたが、Webブラウザで遊べるようにすることで気軽に遊んでもらえるようにするのが狙いです。
以下、開発中のスクリーンショットです。

bsh-unity

開発環境にはUnityを用いています。
Unityを用いることで、WindowsやMacをはじめ、iOSやAndroidなど様々なプラットフォーム上で動くゲームを効率的に開発できます。

新しい機能として、Twitterにスコアを投稿する機能を入れようかと考えています。
ゲームを進めるにつれて急激に難易度が上がるようになっているため、どこまでのスコアを出せる人がいるのか知りたいという理由もあります。

公開したらまたお知らせしたいと思います。

[Unity] PrefabからInstantiateしたときに文字列「(Clone)」が付加される問題

Unityに関するメモ書きです。

スクリプト上でプレハブから以下のようにGameObjectを生成するとします。

このとき、以下のようにプレハブ名+(Clone)という名前のオブジェクトが追加されていることを目にすることがあると思います。

prefab_clone

ヒエラルキー上では見やすくてよいのですが、スクリプトから以下のように名前でGameObjectを取得するときに問題となります。

「Shot」というGameObjectを検索しようとしていますが、プレハブから作成されたGameObjectは「Shot(Clone)」という名前のため検索に失敗します。
「(Clone)」という文字列を付加されたくない場合は以下のように生成されたインスタンスにプレハブ名に強制的に書換えるのが最善策らしいです。

オブジェクト名で検索する場面はよくあると思われるため、上記のインスタンス化処理は関数化しておいても良いかもしれませんね。

■参考サイト
Simple Prefab Instantiate “(Clone)” Question

[WordPress] ブログ攻撃について

WordPressをはじめてから今までで思うことはただひとつ。

非常に海外サイトからの攻撃が多いということです。

WordPress以外のブログでも同様の攻撃は行われていると推測できますが、
サーバに自らインストールして使えるWordpressだからこそ攻撃を目の当たりにすることが出来るということです。

攻撃にはいくつか手段があります。
主な攻撃は以下の通りです。

 ・ブログへの不正ログイン
 ・ブログへの不正なアカウント追加
 ・スパムコメント投稿

上の2つはブログを乗っ取ろうとする攻撃で、アクセスログを見ると時々目にします。
wp-login.phpなんとかのページにアクセスしようとしていたら、ほぼ間違いなく攻撃です。

最後はコメント欄にURL付きのコメントを投稿してくる攻撃です。
私のブログにも毎日のようにやってきます。

上記のような攻撃を仕掛けてくるIPに対しては見つけ次第すぐに掛けるようにしています。
お陰で不正ログイン攻撃は以前より減りました。
スパム攻撃については未だに止む気配がありません。
コメントの投稿を無効にすれば簡単に防げますが、攻撃者のIPを採取するためにもわざと投稿できるようにしています。

攻撃元のIPは様々で、恐らく海外のプロキシサーバ経由で仕掛けているものと思われます。
普通にインターネットをするだけなら、わざわざ回線速度を下げてまで得体の知れないプロキシサーバを使うメリットも無いため、規制を掛けても問題ないと考えています。

攻撃を知るには常にアクセスログを掛けておくことが欠かせないですね。

[Unity] Time.timeとTime.realtimeSinceStartupについてのお話

Unityでモーションを実現したいとき、現在時刻を参照することはよくあると思われます。
現在時刻はTime.timeから分かります。
しかし、このTime.timeはTime.timeScaleの値により時刻の進行速度が変化します。

デフォルトはTime.timeScale=1となっており、本来の速度で時間が経過していきます。

Time.timeScaleの値によらない時刻を取得するには、Time.realtimeSinceStartupを参照します。

したがって、Time.timeScale=1のとき、Time.timeとTime.realtimeSinceStartupは同じ値になると考えられます。
しかし、実際に値を取得すると微妙に異なっていることが分かります。

以下がその検証用スクリプトです。

実際に結果をコンソールに出力してみると、見事に値が異なっていることを確認できます。

※2014/12/13 追記
しかし、上記のコードではTime.timeの参照後にTime.realtimeSinceStartupを参照しているので結果として値がずれて当然かと思われます。
試しに以下のように順序を入れ替えて実行してみます。

Time.realtimeSinceStartupを先に参照しているにもかかわらずTime.timeより値が大きくなっています。
両者ともゲーム起動時からの経過時間ですが、Time.realtimeSinceStartupはリアルタイムな時間、Time.timeは現在フレームの開始時における時間となり内容が異なります。
Time.timeがTime.realtimeSinceStartupより小さかったのはこのためです。

同フレームの中で両者を2回ずつ参照してみます。

Time.realtimeSinceStartupは同フレームでの1回目と2回目の値が異なりタイマーが進行していることが分かります。
一方でTime.timeは1、2回目とも同じ値です。
同フレーム内ではTime.timeは固定の値となります。

このことからも、両者のタイマー値を混在して使うのはバグの元になると断言できます。
勿論、両者の値の意味を知った上で併用するのは問題ありません。
タイマーを使うときはどちらを使うかを慎重に選ぶ必要があります。
Time.timeとTime.realtimeSinceStartupを同じ意味の値として比較すれば時間が逆戻りしたりして大変なことになります。
(ここで私はド嵌りしました・・・)

今回はタイマーの使用上の注意点ということで挙げておきました。

■参考サイト
Unity – Scripting API: Time.realtimeSinceStartup
Unity – Scripting API: Time.time

[Unity] OnDestroy()でゲームオブジェクトを生成するとゴミが残る問題

OnDestroy()コールバックでゲームオブジェクトをnewしたりプレハブからInstantiateするとゲームオブジェクトが解放されずにゴミが残ってしまうことがあります。

この現象の回避策は今のところOnDestroy()でインスタンス化しないことが最善策だと思います。

なぜゴミが残ってしまうかは原因が分かりません。