KLabGames Tech Blog

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

※電子版ダウンロードリンクは一番下にあります。

※技術書典応援祭購入ページは以下です(※リンクはマーケットオープン後更新予定です)

はじめに

KLabでは今回も有志が集い、技術書典8で技術同人誌を頒布する予定でした。 残念ながら、新型コロナウイルスの影響により技術書典は中止となってしまいましたが、代わりにオンラインイベント「応援祭」の開催が発表されました。 そこでKLab有志としても、応援祭へ物理本を出品することにいたしました。

本記事では、今回出品する新刊「KLab Tech Book Vol 6」について紹介します。 新刊 KLab Tech Book Vol.6 では、以下の内容を収録しています。

  • NVIDIA OptiXで『レイマーチング×パストレーシング』による物理ベースレンダラーを自作する
  • Unityの描画ラインをハイジャックして遊ぶ
  • Unity 2D Animationでキャラクターを動かす
  • Arduino UNOを有線ゲームパッドにする
  • バーコードリーダーになろう ― Code128編
  • Python組み込み関数マニアックス
  • 退屈なことはEmacsにやらせよう
  • CloudFront-WAF制御下でLambda@Edgeを利用してReactSPAを動かす
  • 天下一 Game Battle Contest (β) の裏側
ktbv6

取りまとめ担当から

編集および取りまとめ、執筆に参加したmizusawa-kです。 今回は今まででもっとも多く、9人のエンジニアが記事執筆に取り組みました。 その結果100P超えの大ボリュームとなっております。

前述した目次からもわかるとおり、Unityやグラフィック、AWSといったゲーム開発に関わる技術はもちろん、 言語の組み込み関数からArduino、競技プログラミングなど、様々な技術にも触れられる本になっております。

専門分野も技術経験もさまざまなエンジニアが集まって書いており、いつも以上に多岐に渡った記事が楽しめますので、 いろいろな技術に触れてみたい方にはきっと満足して頂け、KLabのエンジニアの幅広さも伺えるのではないかと思います。

そして今回頒布する物理本ですが、表紙に特殊加工、箔押しを用いた豪華な装丁となっております。 毎度恒例になりつつある素晴らしい表紙のイラストですが、今回は格好いいイラストについに箔がつきました。 物理版を手に取った方々には、技術記事の情報だけでなく紙の本ならではの楽しみも感じて頂けると思います。

頒布価格は据え置きで1000円です。 技術書典応援祭では新刊の他、既刊も頒布予定ですので、興味のある方はぜひご確認いただければと思います。

技術書典応援祭購入ページリンク(※リンクはマーケットオープン後更新予定です)

以下に本文のサンプルをいくつか載せておきます。 気になる記事がありましたら、電子版PDFをご覧ください。

contents01
contents02
contents03
sample01 sample02 sample03 sample04 sample05 sample06 sample07 sample08 sample09

技術書典運営事務局の方の尽力のおかげでこのような短期間での実施ができる運びとなったオンラインイベント「応援祭」。 サークル参加、一般参加みなさまの力でぜひ、盛り上げて行きましょう!

ダウンロードリンク

これまでのKLab Tech Bookと、新刊Vol.6のダウンロードリンクは以下になります。

※Vol.6については、応援祭のオンラインマーケットのオープン以降有効になります。

こんにちは。
KLabでVRの研究開発をしているfmystBです。
普段3Dのゲームを開発しているプログラマですが、アセットの制作も行っています。
今回から数回に分けて、研究室内で作っているデモの一部を紹介します。

VR研究開発で使用するツール

ゲームエンジンはUE4を使用しています。
アセットの制作は、モデリングにはBlender2.81(連載中にアップデートされたら都度バージョンを上げます)、テクスチャはSubstance Painterを使用しています。
アニメ調のものではなく、フォトリアルなデモを作っているのでこの組み合わせは使いやすいです。
この連載ではBlenderでのモデリング・UV展開、Substance Painterでのテクスチャ作成、UE4でのマテリアル作成やプログラム開発といった、VRデバイスでプレイ可能な作品を作るための一連の流れを紹介していきます。

Blender2.81

今回の記事ではBlenderでの作業を紹介していきます。
この記事を書いている時点での最新版2.81を使用します。
バージョンが2.8になってからEpic Gamesが資金を提供するなど、ここ最近ますます勢いを増しているツールです。

VRで面白アイテムを作りたい!!

デスクトップ向けのゲームではなく、VRという環境なのでより現実に近い体験を3D空間の中に作り出したい。そんな思いで研究開発を進めています。そこでVRで利用できる面白アイテムを多数作っているのですが、今回はその中の一つ、望遠鏡の作り方を紹介します。
実際にVRデバイス(VIVE)でプレイした映像↓

動画のように昔の海賊をイメージしたアンティークな仕上げにします。

オブジェクトのサイズと向き

それでは作業を始めていきましょう! 望遠鏡の全長は30cmとします。 接眼レンズ側が原点に、対物レンズ側がX軸上の30cmのところに来るようモデリングを進めていきます。
Capture001
デフォルトのCubeのサイズは2m×2m×2mです。
Capture002
Capture002a
テンキーの1を押し-Yから+Yへの視点にして、マウスホイールをスクロールして1マスのサイズ(画像の①)が10 Centimetersになるように拡大していきます。この1マスのサイズは②がorthographic(平行投影)になっているときのみ表示されるもので、テンキー1/3/7で視点をY/X/Z軸方向に調整したときは自動的に平行投影になります。

View Clip の調整

視点がオブジェクトに接近すると
Capture003
のように手前側の表示が欠けてしまう事があります。これを避けるために3Dview上でNキーを押して出てくるメニューでClip startの値を調整します。今回は0.001mまで下げておけば十分でしょう。 Capture005

モデリング

Capture006
デフォルトのCubeを削除し、Cylinderを追加してオブジェクト名をTelescopeに変更します。
Capture007
Edit Modeに切り替えて以下の操作にてモデリングを進めます。

キー 操作
G 移動
R 回転
S 拡大縮小
E 押し出し

G/R/Sの操作はCtrlキーを押しながらマウスを動かすことでキリの良い数値に調整することができます。
3D view上で(テンキーではない)キーボードの3を押して面選択モードに切り替えておきます。(左上の方のアイコンからも切り替えることが可能です。)
まずRキーで全体を90度回転させてX軸方向を向くようにたおします。
次にSキーで底面の直径が4cmになるように縮小します。
その後接眼レンズ側が原点に来るようにGキーで移動し、反対側の面のみを選択して10cmの位置に来るようにします。
そこからEキーを押して真ん中の筒を作ります。大きさは直径5cmになるように調整します。
同様に対物レンズ側の筒も作ります。直径は6cmです。

Capture008
Loop Cutを使い、3つの筒に線を入れます。(Loop Cutをすることで辺選択モードに自動的に切り替わります。)
線が入ったら再び面選択モードに切り替えて
Capture009
の面を1周選択(altキーを押しながら選択することでループ選択になります。)してEキーで押し出して少し拡大します。

対物レンズを作ります。 Capture010
Capture011
Inset Facesを使用して筒の底面の中心に向かって面を作ります。
Capture012
Eキーで内側に凹ませます。
接眼レンズも同じように作りましょう。

対物レンズ側の一番太い筒には後で古い皮のテクスチャを貼りたいのでLoopCutで辺を1周追加しておきます。 Capture013

シェーディング(法線の向き)

デフォルトでは全ての面がFlat Shadeになっているはずです。
Capture014
画像のように曲面をすべて選択してSmooth Shadeにしましょう。
レンズやそれぞれの筒の底面などX軸方向に法線が向いている面はFlat Shadeのままにしてください。

マテリアル

Capture015
マテリアルを2つ作ります。 M_Lens:接眼レンズ
M_Telescope:対物レンズを含む望遠鏡本体
M_という表記はUE4の命名規則を意識しています。
接眼レンズにはUE4上でメインのカメラとは別のカメラで撮影した風景を映し出す特殊なマテリアルの効果を割り当てるため、他の面のマテリアルとは分けておきます。
対物レンズは特に何も映し出さず、その他の部分と同じ扱いをするのでM_Telescopeの方にAssignしてください。

UV展開

3D view上で(テンキーではない)キーボードの2を押して辺選択モードに切り替えておきます。 Capture016
画像のように選択してMark SeamしてUVの切れ目を入れます。 両方のレンズは1周選択して丸ごと切り取り、筒の一番下のラインをすべて選択して切れ目を入れることにより、筒のUVを平面に開くことができます。
一番太い筒の皮のテクスチャを貼る部分は別に切り取っておきましょう。

Capture017
UV EditingタブでUV展開用の画面を開き、接眼レンズ以外を選択してUキーでUV Mappingメニューを開いてUnwrapを選択しましょう。
選択した面のみ左側の画面にUV展開されます。UVの面は大きくとるほどテクスチャの解像度を広く利用できるのでギリギリまで広げておきます。

Capture018
次に接眼レンズを選択してテンキー1でY軸方向に視点を向けて今度はUnwrapではなく、Project from View (Bounds)を選択しましょう。 そうすると現在選択されている接眼レンズを3D Viewの視点から真っすぐにUV展開してくれて、サイズも最大限確保してくれます。

エクスポート

完成図は
Capture019
こんな感じです。
この後Substance Painterを使ってテクスチャを作るわけですが、Substance Painter / UE4 の両方にインポートできるようにFBX形式でエクスポートしましょう。 Telescopeオブジェクトのみが選択された状態で、
Capture020
File > Export > FBX(.fbx) を選択します。
Selected Objectsにはチェックを入れて、選択されたTelescopeオブジェクトのみがエクスポートされるようにします。こうすることでその他のカメラやライトを排除してFBX化することができます。 また、上記のモデリングでは全長3mの望遠鏡になっているので、Scaleを0.1にして30cmの大きさにエクスポートします。

Blenderでのモデリング作業はこれで終了です。
今回作ったFBXを使って、次回Substance Painterでテクスチャを作っていきます。

fmystB

こんにちは!技術広報グループのなりなりです。 業務では、Unityでクライアント側のゲーム開発に関わっています。

今回、社内エンジニア向けに行われたGCP(Google Cloud Platform)の講習へ参加いたしました。

image1

GCP(Google Cloud Platform)とは

GCPとは、Googleクラウド上で利用できる複数のサービス群の総称です。 VMインスタンスの作成ができるCompute Engineやビックデータを高速解析できるBigQueryなど様々なサービスがあります。

公式の概要ドキュメント

今回のイベントの流れ

今回は、岡山事業所、福岡事業所での、GCPハンズオン講習を行いました。また、福岡事業所では実際に運用している各種の社内システムをGCPに移行することを考えた場合にどうするのがよいかという、構成提案と検討の会も行われました。 それぞれの内容についてレポートします。

ハンズオンの目的

KLabでは、すでにGCPをデータ分析などで活用しているのですが、より広く多様な用途に活用できないか、これまで触れたことのなかったアプリ側のエンジニアが学習することで、より幅広い活用ができないかと考え、 GoogleのGCP担当エンジニアの方に講義をしていただきました。

ハンズオン内容

GCPの講義ですが内容は以下のものでした

  • GCPについての説明
  • GCP環境準備ハンズオン
  • GCE(Google Compute Engine)ハンズオン
  • GAE(Google App Engine)ハンズオン
  • GKE(Google Kubernetes Engine)ハンズオン
image4 image2

およそ5時間かけて講義を行いました。 まず座学で説明をおこない、GCPの主要なサービスと その特徴について説明いただきました。

その後、GCPを利用するための準備を行っていただき GoogleConsoleの使い方やインスタンスの立て方などをハンズオンしました。

image3

そして各種ハンズオンを行っていき説明->実作業を繰り返しながら講義を進めました。 基本的に手順通り作業をこなしていき、いくつか演習を行い 次のハンズオンに移るという流れで進みました。

途中休憩をはさみ 最後にGKEのハンズオンを行いました。

image5image7

資料の方はお見せできませんがハンズオン資料は、とても見やすく作られており 講義中、大きく詰まることもなく進行する事ができました。

ハンズオン後は、懇親会を行い GCPに限らない様々な話をGoogle様と行うことができました。

各講義の内容を簡単に振り返ってみます。

GCE(Google Compute Engine)ハンズオン

公式の紹介サイト

ハンズオンで体験した内容

  • VMインスタンスの立ち上げ
  • VMインスタンスへのアクセス方法
  • Google Cloud Shellについて

GCEは仮想マシンの提供サービスでVMインスタンスの作成や管理ができます。

ハンズオンで触った感想としてはVMインスタンスの立ち上げが速く30秒ほどで1インスタンス立ち上げることができ、インスタンス作成の速さやマシン構成の選択肢の豊富さを知ることができました。また、VMへのアクセスは専用のWebコンソールGoogle Cloud Shellを利用してアクセスしました。

GAE(Google App Engine)ハンズオン

公式の紹介サイト

ハンズオンで体験した内容

  • 設定ファイルに利用言語やアプリ情報など設定
  • 実際に一部機能をコーディング
  • デプロイの仕方
  • 過去バージョンの管理
  • スケール変更の体験

GAEはGoogleインフラ上でアプリの作成や実行を行うサービスです。

YAMLファイルに作成したいアプリ情報とRequest Handlerなどの設定を行うだけ必要な環境が自動生成されコーディングするだけでアプリ実行する事ができる様になっています。

ハンズオンで触った感想としては、言語に合わせて事前にライブラリやフレームワークなどを用意せず、いくつかの設定ファイルを記載するだけで言語に合わせた環境が用意ができたのでかなり便利に感じました。

GAEがサポートしてる言語でのみ利用できる形になりますが主要な言語は、ほとんどサポートされており、自由度は維持しつつ事前準備などを省略できアプリ制作が迅速行えそうでした。

また、コード修正やコマンド実行などブラウザ内で完結しておりソフトを事前に入れたりせず環境構築がほぼ不要で利用できるのはとても良いと感じました。

GKE(Google Kubernetes Engine)ハンズオン

公式の紹介サイト

ハンズオンで体験した内容

  • Dockerビルド
  • GKEへDockerをコミット
  • Podsの設定と作成
  • Nodeの設定と作成
  • 自己修復機能の体験
  • オートスケールの方法
  • デプロイ手法の紹介と実践
    • Blue-Greenデプロイ
    • カナリアデプロイ

GKEはDockerのコンテナ機能を管理するサービスです。

今回のハンズオンのメインであるため少し詳しく説明したいと思います。

Dockerを利用して大きなサービスを作るとコンテナは多くなっていきアップグレードやコンテナ単位の障害や複数コンテナにデプロイする場合どうするかなど多くの課題発生するのですがGKEではそうした課題が解消できます。

GKEではコンテナの集まりをPodと呼び、更にPodを管理するNodeがあります。

サービスの一部が障害になった場合、Nodeが自動で障害起こしているPodを再起動する形になっており、またPod単位でコンテナにまとめてDeployできるになっています。スケールアウトする際はPodの複製数の上限下限を予め決めてアクセス負荷に合わせてスケーリングを行ってくれます。

ハンズオンで触った感想としては、複数のコンテナをまとめて管理した上で障害等あった場合は、自動で復旧ができるので可用性があり、活用しやすいと感じました。

DockerファイルをGKE上で管理するためDockerとGKEの両方学習コストが必要ですがGKE側は少ない作業でシステムを構築して管理できるため、大きなデメリットにならないことがわかりました。

GCP移行検討提案会

翌日は、実際に当社のサービスの一部をGCPに入れたらどのような構成になるかGoogleのGCP担当エンジニアの方にご提案いただきました。

image6

ハンズオンに参加したエンジニアと本社のエンジニアを交えながら懸念等がないか深いところまで掘り下げて話し合うことができました。

終わりに

当社では積極的にクラウドの活用を進めていますが、今回、GCPハンズオンを通じて実際にどういったサービスが使えるのか活用するにはどうしたらいいのかを、さらに多くのエンジニアが学ぶことができました。

同時に当社の既存サービスをGCPに乗せるにはどういった構成ができるのか提案を行ってもらい、実際に業務利用する場合は、どうしていくべきなのか等の検討を進めていくことができました。

今後も技術広報グループではこうした取り組みについて積極的にレポートしていこうと思っております。

↑このページのトップヘ