2017年10月

2017年10月27日 (金)PCにも作業してもらおう

雨続きで外に出るのが億劫になります

晴耕雨読とは田園で世間の煩わしさから離れて心穏やかに暮らすことだそうですが、雨の日はコードを読んで過ごすのも悪くないかもしれません。
おはようございます、本日のブログ当番M.Iです

先日CEDECに行ってきましたが、自動化についてのセッションが増え、効率化がゲーム開発に求められるように感じてきました。
効率化の考え方の一種、GUIでの自動化について話します。

CUIのプログラムなら自動的に走らせるのは難しくないことが多いです。
例えばpowershellなら
ls -r | Select-String "error"
とすればカレントディレクトリを再帰的に回り、ファイルを読みとり何行目にerrorという文字列があるかを出力してくれます。
これをjenkinsにさせれば指定した時間に自動的にログを調べ、errorの文字を検索するというような動作ができます。

しかし、最近のゲームエンジンはUnity然り、UE4然りGUIで操作します。
パッケージ作成等はCUIでも操作できるので自動化が楽ですが、自動配置というようなことをしたい場合は自動化が難しいかと思います。
プラグインで実装ということもできますが、APIの構造など、内部をよく知っておかないと実装ができないです。

そこで画像認識とマウス自動操作を実装し、自動化を実現してみます。
コンピュータに画像にある物体を認識させるのは、コンピュータビジョンという研究分野なのですが、うれしいことに人類の研究の成果がOpenCVというライブラリに還元されていて、手軽に利用できます。
CVはComputer Visionの略なのでコンピュータビジョン専門のライブラリです。
映っている物体を学習して分類する機能もあり、機械学習といった分野とも関係するので、サポートベクターマシン等の幅広いアルゴリズムも備えています。

コンピュータビジョンで実装する利点として、ソフトのAPIに依存しないプログラムが書けることが挙げられます。
反面似たような画像が画面上に現れることで、フローがおかしくなったり、誤って別の箇所をクリックするといった事故が起こることもありえます。
プラグインにも言えることですが、最悪アセットが削除されたり、変な状態で上書き保存されることも考えられます。
どちらにしても、こまめにバージョン管理しておけば大体の場合リカバリできます。

前置きが長くなりましたが実装していきます。
C++から利用すれば最新の手法が試用できるのですが、古典的なテンプレートマッチングという手法で実装するので、C#版の方で実装します。
テンプレートマッチングとは探したい物体の映った画像を作り、その画像と一致するところを探すという手法です。
違う物体を目的のものと認識してしまうことがほとんどないのですが、画像の向きがちょっとでも変わったり、少しでも形が違うと認識されなくなってしまいます。
3D空間に浮いていたり、回転するUIを認識させたいわけではないのならこの手法で充分です。
[ LINK ] https://github.com/shimat/opencvsharp
からソースをビルドすることもできますし、nugetから自分のプロジェクトに組み込んでもいいです。

まずは雰囲気をつかむため、画像からテンプレート画像を検出してみます。
コード中の<>は半角に直してください。

string srcPath = "src.png";
string templatePath = "template.png";
// 画像を指定パスからグレースケールに変換してロードを行う
Mat src = new Mat( srcPath , ImreadModes.GrayScale);
// 検出させたい物体が映ったテンプレート画像をグレースケールに変換してロードを行う
Mat template = new Mat(templatePath , ImreadModes.GrayScale);
// 4バイトの結果格納用の配列を作成 
Mat result = new Mat(src.Rows - template.Rows + 1, src.Cols - template.Cols + 1, MatType.CV_32FC1);
// テンプレートマッチングし、結果をresultに入れる。テンプレート画像と似ているほど1に近付く。
Cv2.MatchTemplate(src, template, result, TemplateMatchModes.CCoeffNormed);
// 配列の閾値以下の要素を0にする つまり0.95未満の類似度の個所を類似度0にする
Cv2.Threshold(result, result, 0.95, 1.0, ThresholdTypes.Tozero);
List < Point > detectedLocations = new List < Point > ();

for (int x = 0; x < result.Rows; x++)
{
	for (int y = 0; y < result.Cols; y++)
	{
		// 配列から類似度0以上の時の座標のみ追加
		if (result.At < float > (x, y) > 0)
		{
			detectedLocations.Add( new Point(x,y) );
		}

	}
}

テンプレートマッチングはテンプレート画像を画像の上で縦横にずらし、一致するピクセル数を数えるイメージです。
画像からはみ出た個所を検出しても意味がないので、resultはテンプレート画像分引いたサイズになっています。

認識はこれで試せました。
PCの画面をキャプチャし、OpenCVに渡す必要があります。
OpenCVにカメラ出力をもらう関数があります。
SCFH DSFという画面キャプチャソフトの出力をとれるのでそれを利用します。

Mat template = new Mat(templatePath, ImreadModes.GrayScale);
// カメラからキャプチャ
VideoCapture capture = new VideoCapture(0);
// キャプチャ画像を出力
Mat srcColor = capture.RetrieveMat();
Mat src = new Mat();
// カメラ画像をグレースケールに変換
Cv2.CvtColor(srcColor, src, ColorConversionCodes.RGB2GRAY);
Mat result = new Mat(src.Rows - template.Rows + 1, src.Cols - template.Cols + 1, MatType.CV_32FC1);
// 後はテンプレートマッチングと同じ

最後にマウス入力を行います。
[ LINK ] http://whoopsidaisies.hatenablog.com/entry/2013/03/22/142031
[1]
を参考にWindowsAPIを使用し、指定個所をクリックさせるようにします。

class WinAPI
{
	[DllImport("USER32.dll", CallingConvention = CallingConvention.StdCall)]
	static extern void SetCursorPos(int X, int Y);

	[DllImport("USER32.dll", CallingConvention = CallingConvention.StdCall)]
	static extern void mouse_event(int dwFlags, int dx, int dy, int cButtons, int dwExtraInfo);
	private const int MOUSEEVENTF_LEFTDOWN = 0x2;
	private const int MOUSEEVENTF_LEFTUP = 0x4;
	public static void Click(int x, int y)
	{
		SetCursorPos(x, y);
		mouse_event(MOUSEEVENTF_LEFTDOWN, 0, 0, 0, 0);
		mouse_event(MOUSEEVENTF_LEFTUP, 0, 0, 0, 0);
	}
}

テンプレートマッチング後、detectedLocationsに見つかった個所が入っているので、そこでWinAPI.Clickを呼んでやればクリックしてくれます。
これで画面から物体を認識し、クリックまで実装できました。

jenkinsのworkspaceフォルダにテンプレート画像とビルドした実行ファイルを入れておけば、「Windowsバッチコマンドの実行」の機能で自動操作に組み込めます。

マウスクリック以外にもキーボード入力といった任意の操作が自動化できるので、アイデア次第で様々な仕事ができるようになるかもしれません。

参考文献
[1] C#で指定した位置をクリックする , whoopsidaisies ,
[ LINK ] http://whoopsidaisies.hatenablog.com/entry/2013/03/22/142031 (参照 2017/10/26)

follow us in feedly
result = encodeURIComponent( "http://www.accessgames-blog.com/blog/2017/10/pc-8047.html" );document.write( "result = " , result );&media=https%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest">

| | コメント (0) | トラックバック (0)

2017年10月20日 (金)タイミングって重要よね

おはようございます
本日のブログ当番モーションデザイナーのR.Nです。

最近、某3Dアニメを見たのですが、アニメならではの様々な表現が盛り込まれていて楽しいですね。
中でも波の動きが面白くて、この作品は波の動きに感情をもたせ、主人公の動きを真似したり、ちょっかい出したりと面白い動きをします。
波の動きと言っても波だけではなく、周りの水のしぶきや打ち寄せて波に濡らされる砂、波が引くにつれて乾いていく砂にも感じられるものがあります。
その波が現実ではありえないような動きをしていても、アニメ的に動かす方が見る側にとって分かりやすいよなーという表現をしていて面白いと思います。

そしてこの作品を見て、改めて思いました。タイミングとスペーシングって大事やなーと。
実際、タイミングとスペーシングはどちらも大事です。

意味としては

「タイミング」はどれだけの時間かかるか。

「スペーシング」は動いている物のフレームごとの配置。

例えばボールをAからBまで転がしたとして、AB間にどれくらいの時間がかかるのかというのがタイミング。
AB間の中の各フレームで物をどういう配置にするのかというのが、スペーシングになります。

20171017_1

なぜタイミングが重要なのかというと、タイミングによって動きの意図が変わってくるからです。
タイミングを操ることで、物体の重量や質感といった物理的なものからキャラクターの考えていることや内面的なものまで表現できてくると思います。
そういったタイミングを学ぶのにアニメは良い資料です。

皆さんも一度は見たことがあるかと思います。
走り出す時の予備動作を大げさにするようなやつや、崖に向かって走って、勢い余って地面が無いところで足踏みするとか。
これらのアニメ表現は、ゲームモーションを作る上でかなり参考になります。

正直、ゲームモーションは物理法則なんていくらでも無視できるのでやりたい放題です。
しかし、全部がそうなってしまうと動きに説得力がでてきません。
ゲームのジャンルによりますが、ある程度物理法則が入っているのとそれを無視した動きのバランスが必要になります。
そのバランスをとるのにアニメのデフォルメされた表現が参考になってくるのです。

皆さんが作品を見てる時、この表現いいね!と感じる瞬間があると思います。
それはキャラの演技やタイミング等で、何らかのデフォルメ表現がなされているからです。

今後も色々な作品に触れて、いいね!と思えるようなものを一つでも増やしていこうと思います。

follow us in feedly
result = encodeURIComponent( "http://www.accessgames-blog.com/blog/2017/10/post-d47b.html" );document.write( "result = " , result );&media=https%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest">

| | コメント (0) | トラックバック (0)

2017年10月12日 (木)今年の夏の思い出

おはようございます。本日の当番、CGデザイナーのJ.Sです。

10月となり、だいぶ秋の深まってきたところと思いますが、今日は、この夏帰省してきたときの写真をいくつか掲載します。

1枚目は、仙台の秋保の写真です。
20171010_1

よく晴れた秋の入りの午後といった感じです。
家族で久しぶりに温泉に行ってきたのですが、旅館の部屋が予想外に景色のよい部屋でした。
向って奥の方が実家のある山形で、かすかに山寺のある山が見えてます。

2枚目は、天童市の若松観音堂付近からの村山平野。
20171010_2

1枚目の秋保の次の日で、だんだんと曇ってきた感じです。
大気中にも水蒸気(?)が多いせいか遠くの方が霞みがかって見えてる感じです。

3枚目は実家の窓からの村山平野。
20171010_3

大雨が上がった後の澄んだ遠くまではっきり見える風景と、日差しのコントラストが気に入ったので撮影しました。

4枚目 見る方向によって雲の表情が違い、飽きないです。
20171010_4

というわけで実はこのとき、一枚目(9/15)から4枚目(9/18)の写真の間で、台風18号が接近し、過ぎ去っていきました。
1枚目に比べ、3・4枚目の雲が荒々しく複雑なのはそのためです。

背景グラフィックを作っていると、感じるのですが、この写真の雲のように太陽の向きに応じた、きれいな光と影の描写をゲームエンジン上で作るのはとても難しいです。
かなりの部分を、プログラマさんや、シェーダーの組み方に詳しいアーティストに相談しながら作るのがよいのでしょう。

・・・そんな事を考えながら一時は大阪への帰阪もどうなるかと思えた、今年の夏の帰省でした。

結果的に無事に飛行機が飛び、大阪に帰ってこれた、今年の夏の思い出の写真です。

follow us in feedly
result = encodeURIComponent( "http://www.accessgames-blog.com/blog/2017/10/post-72ef.html" );document.write( "result = " , result );&media=https%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest">

| | コメント (0) | トラックバック (0)

2017年10月 5日 (木)ゲーム情報のおいしい季節

おはようございます。本日のブログ当番、プランナーのJ.Hです。

先日行われた「東京ゲームショウ2017」では様々な発表やイベント、映像の配信や体験会などが行われて盛り上がりを見せてくれました!

アクセスゲームズからは毎年、数名が視察として出向いては空気感を肌身で感じたり知見を得たりし、社内で情報共有を行っています。

私自身は今回は出向く事が出来ませんでしたが、当日のイベントに関する生放送配信を後から追って観てみたり、出向いた同僚の土産話を聞いたりして現場の熱を感じると一ゲーム好きとして"ゲーム開発者冥利に尽きる!"なんて思ってしまいます!
テレビか雑誌からでしか情報を得られなかった時代に比べると贅沢なもので…。

ゲームのイベントは「東京ゲームショウ」だけでなく世界規模で様々なイベントが開催されており、ゲーム開発側としてもそれらイベントに合わせて『トレーラー映像』や『体験版』などを作成し、皆様に発表できるよう日々ゲーム製作を進めています。
それに伴い、発表をする素材についてもスケジュールに絡めつつ準備を行い、製作の区切りの一つともなるため、事前にイベントについて想定しておく事が大事になってきます。

今回、復習も兼ねてゲーム関連の主な"ショウ"や"大規模イベント"を以下にまとめてみましたので、開催期間や情報記事をチェックしたり足を運んでみたりするための切っ掛けにしていただければと思います。
(当然、イベントは他にも多数あります。)
弊社公式HPにもイベントレポートがアップされていますので是非ご覧ください!

⇒ Electronic Entertainment Expo 2017 ロサンゼルス市街地視察編
⇒ Electronic Entertainment Expo 2017 E3編
⇒ TOKYO GAME SHOW 2016
⇒ PAX West 2016

And more...


■東京ゲームショウ … 開催日:9月末前後
 千葉の幕張メッセにて開催される日本最大規模のゲームショウ。

■E3 … 開催日:6月頃
 [Electronic Entertainment Expo]
 米国のロサンゼルスで開催される世界最大の
 コンピューターゲーム関連のゲームショウ。

■Gamescom … 開催日:8月頃
 ドイツのケルンで開催されるコンピュータゲームの見本市。
 E3、東京ゲームショウと並ぶ世界三大ゲームショウ。

■PAX West … 開催日:9月頃
 [PAX = Penny Arcade Expo]
 アメリカ・シアトルで開催されるゲームの大型イベント。
 ゲームカルチャーに関するウェブコミックサイト「Penny Arcade」が由来。

■PAX East … 開催日:4月頃
 アメリカ・ボストンで開催されるゲームの大型イベント。
 ※PAX系イベントは他にも「PAX Australia」「PAX South」が開催。

■China Joy … 開催日:7月頃
 中国・上海で開催されるアジア屈指の規模のゲーム関連イベント。
 総合的なエンターテイメントのイベントという点をコンセプトとしている。

※上記、イベント開催日と開催地については今後、変動する可能性があります。

follow us in feedly
result = encodeURIComponent( "http://www.accessgames-blog.com/blog/2017/10/post-4c20.html" );document.write( "result = " , result );&media=https%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest">

| | コメント (0) | トラックバック (0)