KLabGames Tech Blog

KLabは、多くのスマートフォン向けゲームを開発・提供しています。 スマートフォン向けゲームの開発と運用は、Webソーシャルゲームと比べて格段に複雑で、またコンシューマゲーム開発とも異なったノウハウが求められる領域もあります。 このブログでは、KLabのゲーム開発・運用の中で培われた様々な技術や挑戦とそのノウハウについて、広く紹介していきます。

こんにちは、s_naritada です。
6/13にAiming × KLab コラボMeetup!を開催しました。
今回、登壇発表させていただきましたので発表時の補足解説を少ししたいと思います。

Aiming × KLab コラボMeetup!について

株式会社AimingとKLab株式会社でコラボしてスマホ向けのゲーム開発について
両社からそれぞれ2名のエンジニアが登壇して「ゲーム演出」をテーマに発表を行う勉強会です。
立食しながら発表を聞く形式をとっており、気軽な雰囲気で聞いていただけました。

本稿は、当日発表した内容の補足解説となっております。
最初に発表で使用した以下のスライドを御覧ください。

出現演出の補足

公開スライドでは、静止画になっているので再掲します。

digital_fix_02
digital_fix_06

上記の出現シェーダーを作りました。
以下は、出現演出のシェーダーコードになります。

float4 textureColor = tex2D(_MainTex, float2(input.tex.xy));

// sinは-1~1で帰ってくるので0-1に正規化している
float mask_value = sin(input.screen_position_y * 200) * 0.5 + 0.5;

// テクスチャ色とカラーパターンを合わせる
float col = textureColor * input.color;
col.a = min(step(mask_value, _CutOff), col.a);

col.rgb = lerp(_Color.rgb, col.rgb, min(1, _CutOff));

return col;

マスクするテクスチャは以下のコードで自動生成しています。
画面からの座標を取得できるのでそれをsin値で変換して作っております。

// sinは-1~1で帰ってくるので0-1に正規化している
float mask_value = sin(input.screen_position_y * 200) * 0.5 + 0.5;

画像のような見た目になります。
_CutOffで設定した0-1の値が来ると値に応じて画像がマスクされていきます

sin_pattern_01

input.screen_position_yは、画面のY座標になっており
以下のコードで事前に頂点シェーダで算出して入れておきます。

float4 screen_pos = ComputeScreenPos(output.pos);
output.screen_position_y = screen_pos.y / screen_pos.w;

次に以下のコードで設定した閾値以下はアルファ値を0にするようにしています。

col.a = min(step(mask_value, _CutOff), col.a);

そして最後に閾値に応じて指定した色味を重ねる処理を入れてます。

col.rgb = lerp(_Color.rgb, col.rgb, min(1, _CutOff));

以上、出現シェーダーの補足説明でした。

スライド画像の補足

最後に掲載したスライドで静止画になってしまった画像を載せておきます。

ページ番号 画像
11 digital_fix_01
12 digital_fix_08digital_fix_07
13 digital_fix_03
14 digital_fix_02digital_fix_06

あとがき

こうした外部の勉強会での発表は初めてでしたが多くの人に聞いてもらうことができました。
イベントを用意していただいた運営の皆様、参加いただいた皆様、
版権作品を載せることを許可頂いた版元様、ありがとうございました。
これからも有志として発表活動を続けていきたいと思います。

©久保帯人/集英社・テレビ東京・dentsu・ぴえろ ©KLabGames

こんにちは、makki_d です。

前回の技術書典3に続き、技術書典4でもまたまたKLabの有志で同人誌を頒布しました。 この記事ではその報告をしたいと思います。

前回同様、紙の同人誌の他に、電子版を無料配布していました。 この記事の下部にもダウンロードリンクを用意しましたので、興味のあるかたはぜひご覧ください。

技術書典とは

技術書典は、プログラミングについての同人誌を作成しているサークル TechBooster達人出版会が主催する技術・科学系同人誌即売会です。

ナンバリングイベントの4回目となる今回は、前回と同じく秋葉原のアキバ・スクエアで4/22に開催されました。 晴天に恵まれたこともあり、来場者数6000人超となる一大イベントとなりました。

頒布した本

表紙

今回も執筆者が書きたいことを書いたため、雑多な内容となっています。

  • Cygwin 環境で Docker を快適に使うために
  • Unity で開発しているスマホゲームで Xcode のバージョンアップをする
  • Re:VIEW で書いた原稿の CI を AWS CodeBuild で回す
  • WebAssembly で行列の演算をする
  • Python インスタンスの属性は辞書(dict)で管理されているのか調べてみた

また、次の記事は締め切りに間に合わなかったため、電子版にのみ収録しています。

  • リアルの街を Unity に取り込む 〜GIS へのいざない〜

なお、表紙等のイラストは社内のデザイナー・イラストレーターによるものです。 表紙や裏表紙、当日配布したDLカードに描かれたキャラクターは、眼鏡っ娘率100%という超豪華仕様となっており、 イベント当日も一部の方々に大好評でした。

ブースはこんな感じでした。

ブース

執筆方法

参加の経緯やツール選定については以前の記事を見ていただくとして、 今回もRe:VIEWで執筆し、データをGitHubで管理しました。

さらに、今回はGitHubへのpushをトリガーとしてAWS CodeBuildでPDFを生成し、Slackに共有するというCI環境を構築してみました。 詳細は本誌の「Re:VIEW で書いた原稿の CI を AWS CodeBuild で回す」をご覧ください。

前回からの改善点

表紙に内容を書いた

前回の反省点として、ぱっとみてどんな内容の本かわからないという失敗がありました。 今回は表紙に各記事の内容をそのまま書いてみました。 表紙を見て興味をもって頂いた方も見受けられたので、良い改善でした。

大判ポスターを立てた

スペース前に人だかりができてしまうと、机上に説明書きなどを立てても見えなくなってしまっていました。 さらに前回は、黒文字のみの説明書き自体がそもそも目立たなかったというのも問題でした。

今回は多くの人に見てもらえるよう、表紙を拡大した大判ポスターを用意しておきました。 来場者自体が多かったこともあり、おかげさまでスペース前には常に人がいるような状態でしたが、 ポスターを見て足を止めてくださる方も多かったです。

CIでPDFを生成してレビューの効率を上げた

今回はレビューのフロー自体を変えてみました。 著者は記事を直接masterにコミットしてGitHubにpushします。 するとCIでPDFが生成されるので、レビュワーは最新のPDFを見て、修正案やコメントをPRの形で著者に伝えるという方式にしました。

前回は各記事をGitHubのPRの形でレビューしていましたが、やはり組版された状態のほうが文章のレビューはしやすかったです。

次回に向けて

今回はイベント自体が盛況だったことにも助けられ、新刊・既刊ともに完売することができました。 ただ、無料配布の電子版DLカードのほうも早々に完売してしまい、電子版をお求めの方にはご不便をおかけしてしまいました。 次回以降、本はもちろんのこと特にDLカードも十分な数を用意したいと思います。

また諸般の事情により今回は「かんたん後払い」を受け付けることができませんでした。 次回はどうにか対応したいと考えています。

最後に

KLab有志としての参加は2回目となりました。 イベント自体も回を重ねるごとに盛況となっており、運営の皆様、参加者の皆様、本当にありがとうございました。 これからもKLab有志として参加できることを楽しみにしていますので、今後ともよろしくお願いします。

電子版

ここまで読んでいただきありがとうございました。 電子版PDFダウンロード

はじめまして。普段はiOSを使っているのに開発中はAndroid周りについて見ること多いsuzu-jです。

最近はHuawei製の端末等、国内でも搭載しているSoCがSnapdragonではない端末が増えてきました。 そんな端末でも、読み込まれているテクスチャや、描画順の確認等、グラフィックス周りのデバッグをするために、今回は Mali Graphics Debugger の使い方を紹介します。

対象はCPUがARMでGPUがMaliのAndroidとなります。 x86系統のCPUだとrootedな端末が必要な上、手順が違うため今回の記事では対象外です。

説明は dtab Compact d-02HWindows 上で行いますので、Mac等その他のOSを使っている方は適宜読み替えてください。

なお、大体のアプリに繋げられてしまうSnapdragon系列と違い、こちらは残念ながら自分でビルドするアプリケーションでしか見れません。 むしろセキュリティ的に見えるのがおかしいと思うのですが。

PC側の準備

まずはダウンロード、公式サイトから自分のプラットフォームに応じてダウンロードしてインストールします。

インストール後は Edit->PreferencesPath to ADB にADBのパスを指定しておきましょう。

mgd_adb_path

端末側の準備

端末側にはDebuggerと繋げるためのアプリケーションをインストールする必要があります。

Windowsでインストール先を変えていなければ、 C:\Program Files\Arm\Mali Developer Tools\Mali Graphics Debugger v4.8.0\target\android\MGD.apk があるため adb install でインストールしましょう。

アプリケーション側の準備

アプリケーション側にはPluginを入れる必要があります。

Pluginは C:\Program Files\Arm\Mali Developer Tools\Mali Graphics Debugger v4.8.0\target\android\ 以下に、各CPUに応じたlibMGD.soがあるので、デバッグしたい端末に応じて配置していきましょう。

今回の端末はarm-v7aの端末なので C:\Program Files\Arm\Mali Developer Tools\Mali Graphics Debugger v4.8.0\target\android\arm\unrooted\armeabi-v7a\libMGD.soAssets\Plugins\Android\libs\armeabi-v7a 以下に配置します。

通常であればこれで準備完了となります。

Debuggerとアプリケーションの接続

対象アプリのAPKをインストール後に、PCとAndroidを繋げたまま、Android側の Mali Graphics Debugger を起動しましょう。 Enable MGD Deamon: の項目をONにして下のアプリケーション一覧からDebuggerに繋げたいアプリを起動しましょう。

mgd_android

アプリを起動したらPC側のDebuggerから Debug->Open the Device Manager を選択すると、接続している端末の一覧を開きます。

mgd_test_select_device

接続したい端末名の左にあるアイコンを選択すれば接続完了。晴れて各種描画関連の確認が出来るようになりました!

mgd_test_connected

上手く接続できない場合

Debugger起動前にアプリを開いている場合、うまく接続できないことがあるようなので、アプリのタスクキルをしてから再度開きなおしてみましょう。

Activityをカスタマイズしている等の場合、Activity側にも手を入れる必要があります。UnityPlayernew するより前に System.loadLibrary("MGD"); を呼んであげましょう。 よくわからないけれど使っている外部PluginがActivityを書き換えている、という場合は onCreate をOverrideしたActivityを作ってあげると動くことが多いと思います。

それではよい最適化ライフを!

明日、20日目はやまださんです。よろしくお願いします。

↑このページのトップヘ