スプーキーズのちょっとTech。

SPOOKIES社内のより技工的な、専門的なブログページです。

3Dモデルを作りたい

みなさまこんにちは、新人のnytkと申します。

趣味は、ゲームと、TCG(カードゲーム、とくにマジック・ザ・ギャザリング)です。

以前、社内でカードゲーム勉強会もしました。

ゲームの中で3Dのモデルが動くっていいですよね。

特に、自分が作ったやつが動いたら楽しそうです。

突然ですが、3Dのモデルを作ってみたくなったので作ってみます。

今回使うのは昔少し触ったMetasequoia LEです。(新しいやつ買おう)

起動するとこんな画面が出ます。

f:id:spookies_nytk:20170714094350p:plain

今回作ろうと思うのは画鋲です。 3Dでも簡単なやつならすぐに作れるということを見せようと思います。

今回は回転体の機能を使って作ります。(だから回転で作れそうな画鋲です。)

回転体とは断面をぐるっとまわした軌跡の部分をモデルにするというものです。

というわけで断面を作りましょう。

f:id:spookies_nytk:20170714094610p:plain

座標をぽちぽち入力、数値を直接しないでクリックでもいいです(ずれるのが嫌なので数値で打ってますが)

f:id:spookies_nytk:20170714094948p:plain

こんな感じでしょうか。

断面を作ったらオブジェクトを選択して、

f:id:spookies_nytk:20170714095032p:plain

回転体を適用しましょう

f:id:spookies_nytk:20170714095257p:plain

f:id:spookies_nytk:20170714095405p:plain

(ちょっと分厚いような)

大丈夫です、後からでも修正可能です。

範囲選択を選んで

f:id:spookies_nytk:20170714095454p:plain

この辺りを選択して

f:id:spookies_nytk:20170714095609p:plain

移動を選んで

f:id:spookies_nytk:20170714095636p:plain

選択部分を下にずらします。

f:id:spookies_nytk:20170714095726p:plain

ほっそりしました。

あとは色でもつけましょう。

材質を作成して色を黄色にします。

f:id:spookies_nytk:20170714095848p:plain

材質を未着色部分に貼り付けます

f:id:spookies_nytk:20170714095950p:plain

完成!

f:id:spookies_nytk:20170714100033p:plain

ちょっとしょぼい気もしますが、こんな感じに3Dを作成することができます。

今回使ったMetasequoiaは、新しいものも出ています。

metaseq.net | 3Dモデリングソフトウェア「Metasequoia(メタセコイア)」公式サイト

EX版はUnityで使える.fbxにも対応しているみたいですね。

WebVRはVRの主流になりうるか

こんにちは、モリタです。

VR業界の動きが気になって仕方がないのですが、最近はWebVRに注目しています !

WebVRという言葉をあまり聞いたことがいない人もいるかと思うので軽く説明すると、OculusRiftやHTCViveなどのヘッドセットをwebブラウザ上で動かそうという試みです。
ヘッドセットを扱うためのAPIが提供され、 JavaScriptからヘッドセットを操作することができます。ただ、現状はchromeのwebVR開発用ビルド版とFirefox Nightlyでのみサポートされているようです。
実際にFirefox NightlyでHTCViveを動かしてみましたが、まれにブラウザが落ちたりヘッドセットの動きと表示にタイムラグが発生することがある(ネイティブアプリではラグが発生することはないのでPCのスペックの問題ではなさそう)などまだ開発中という印象はありました。


f:id:moritanian:20170628160324j:plain 写真右がHTCVive, 右がモバイルVR用ヘッドセット

WebVRフレームワーク

mozillaのA-frame や、facebookのReactVR など、WebVR用の様々なフレームワークも登場しています。それらのほとんどで3Dライブラリのthree.jsが利用されており、three.jsはWebVRのビュー部分のスタンダードのようです。

aframe.io

https://facebook.github.io/react-vr/facebook.github.io


モバイルVR

f:id:moritanian:20170628155846j:plain モバイルVRでは、レンズのついたモバイルVR用のヘッドセットにスマホ端末を入れて使います。端末には左右に画面分割し視差を設けた動画を表示するだけでよいので通常のブラウザだけで動かすことができます。
googleはモバイルVRの分野で低価格のcardBoardやVRプラットフォームのdaydream を発表しています。
googleのChromeExperimentsForVertualReality のページではスマホVRに対応したコンテンツを見ることができます。 vr.chromeexperiments.com

モバイルVRを試してみた

スマホVRでは端末に搭載されている加速度センサと磁気センサから姿勢を求めることで頭の動きに合わせて画面をうごかしています。
実際にスマホ用のヘッドセットを被ってみたのですが、うまく頭の動きに合わせて画面が動きません。スマホ用のヘッドセットから端末を外して端末単体を傾けると正しく動いていました。どうやらスマホ用ヘッドセットに金属か磁石がふくまれているからのようです。ダンボール製のcardBoardなどでは問題がおこらないと思いますがみなさんもご注意ください!


モバイルVRガジェット

  • DayDreamVR : DayDreamに対応したモバイルVRヘッドセットです。cardBoardとは違いファブリック素材でできており、従来のものよりも快適な体験ができるとのことです。専用のコントローラが付属します。日本では発売が決まっていない模様。 madeby.google.com

  • ZenFoneAR : こちらは Google Tango(AR(拡張現実)のgoogleプラットフォーム)とGoogle DayDreamの両方に対応した世界初の端末です。日本では今年の夏発売とアナウンスされていたのですが、ついに6月23日に発売開始されたようです。(欲しい!) www.asus.com

WebVR の今後

WebVRのメリットはurlだけでコンテンツを共有でき、アプリのインストールが不要であることが挙げられるでしょう。 開発者側にとってもクロスプラットフォームであることやアプリ審査が不要であることは大きいのではないでしょうか。
ネイティブと比較して速度の問題などまだまだ課題はあると思いますがwebAssemblyやProgressiveWebAppsなど様々な試みもあり今後解決されていくのではと思います。お手軽に体験できるという意味でWebVRはモバイルプラットフォームと相性がいいのではと思っているので今後WebVRが盛り上がっていくことを期待しています!!

擬似3Dダンジョンの作ってみよう!

擬似3Dダンジョンとは


擬似3Dダンジョンと聞いてなんぞやと思う人もいるでしょう。

ずばり、2D上で3Dっぽく見せるダンジョンということになります。

擬似3Dダンジョンを使った作品で有名な物を二つご紹介

  • ウィザードリィ
    • 言わずと知れた名作RPG
    • 1981年にAppleⅡ用に世間へ羽ばたく
    • 魔物の画像を表示したコマンド式戦闘システムを確立、多くのゲームに影響を与えた
  • 世界中の迷宮
    • ウィザードリィを意識して作られた現代版ウィザードリィ
    • 音楽が良い

未プレイの方にはおすすめのゲームです!

自己紹介


さて、本題に入る前に少しだけ自己紹介。

情報系大学の3年生のロックです。

名前の由来は溢れ出るロックンロール精神でしょうか。

気がついたらロックと呼ばれていました(不思議ですね)

そんな私ですが、普段は大学サークルでゲームを作っていたりします。

大学1,2年の間はしっかりと作品を完成させることが出来ずに積もり積もっていくガラクタ生産工場長でした。

しかし、最近少しずつ作品を完成させることが出来るようになってきました。

ガラクタからコードをひっぱてきたりすることもあるので、続けて来たからこそ今があると実感する今日この頃です。

前置き


今回の開発環境は以下の通りです。

  • Visual Studio 2015
  • C/C++
  • DXlib

Windowsでの開発となります。

主な実装機能


では、本題に入りましょう。

擬似3Dダンジョンを作るにあたって、今回実装する機能を紹介しておきます。

  1. ミニマップの表示
    • マップと現在位置とゴールの3種類を表示します
  2. 自由に歩ける
    • キーボードの矢印キーで自由に動けるようにします
  3. 視界の表示
    • 擬似3Dの描画をするための準備
  4. 擬似3Dの描画
    • 肝心要。主題
  5. ゴールを作る
    • 一応のゴール

目標としては擬似3Dの描画が出来れば達成とします。

それでは、一つずつ見ていきましょう。

処理の流れ


1. ミニマップの表示

ミニマップとは言っていますが、がっつりマップですね。

今回は擬似3Dとして最終的に描画してしまうので、全体マップというものが見れないことになってしまいます。

そこでこのミニマップを実装します。

< 実装方法 >

二次元配列を用意して、数字で埋めましょう。

  0:なし 1:壁 2:ゴール 3:初期位置

マップの大きさは12*12ぐらいにしておきましょうか。

最後に、数字に合わせて描画すれば完成(今回は色で表現)

  0:灰色 1:白 2:赤

初期位置に関しては描画しなくて良いでしょう。

代わりにプレイヤーの位置は表示することにします。

  プレイヤー:青

2. 自由に歩ける

プレイヤーも動けた方が良いですよね。

< 実装方法 >

Dxlib にキーボード入力を取得出来る関数があるので、それを用いればばっちりです。

  ↑:前へ進む ←→:旋回 ↓:後ろを向く

今回はマス目移動。

プレイヤーは位置と向きを持つことになります。

3. 視界の表示

突然出てきた視界という単語。

今回は3マス分の視界にしましょう。

左奥 中央奥 右奥
左中 中央中 右中
左前  私  右前

3*3のマスを調べて、壁があるのかないのかを判定出来れば良いです。

「私(プレイヤー)」の場所は調べなくても良いので、8マス調べることになります。

これが上下左右の4方向あることも踏まえて実装を考えます。

< 実装方法 >

プレイヤーの位置とプレイヤーの向きを基準にして、マス目を調べる

調べた結果は視界用の3*3の二次元配列に格納(プレイヤーの位置には 0 とか入れておきましょ)

視界用配列から、視界を取得して扱います。

せっかくなので、ミニマップと同様の手順で、視界も表示しておくことにします。

4. 擬似3Dの描画

ようやく来ました。

と言っても、ここまで順番にやってきたら、処理としてはすることがありません。

視界用配列を値を元にして、ぺたぺた画面に画像なり図形なりを貼り付けていく作業になります。

画像を用意するのは大変なので、図形を用います。

< 実装方法 >

Dxlib に四角形を描画する関数があるので、それを用いる。

左奥、中央奥、右奥、左中、中央中、右中、左前、右前、の8つそれぞれに四角形を描画する。

5. ゴールを作る

マップを作ったときに実はゴールが出来ています。

あとはそれを取得するだけです。

< 実装方法 >

プレイヤー位置のマップ情報を取得して、ゴールならゴールする

成果物


f:id:ishiyamacocoa:20170622235041p:plain 右上:ミニマップ   ミニマップの下:視界   左:擬似3D描画

f:id:ishiyamacocoa:20170623011253p:plain ゴールしました。

おまけ


触れていませんでしたが、通路も描画しています。

中央、中央奥にかけて、真っ暗じゃない床を描画しておくと、方向感覚が狂いにくいです(ないとわかりづらい)

これでウィザードリィも作れるぞーと思っていますが、特に作る予定はない。

知的好奇心だけで実装しちゃうお茶目なロックでした。

ありがとうございました。

以下に拙いですが、ソースコードを載せておきます。

  • Dungeon3D.cpp
  • Dungeon3D.h

の二つです。

改めて、ありがとうございました。

Dungeon3D.cpp


gist08766e3ec20e70c56dd91de28944df00

OSS Gate WorkshopをやってOSS開発者率が42.8%になった

5/10, 5/12 の2日間で社内向けOSS Gate Workshop (Closed Kyoto) を開催しました。

OSS Gateとは東京・札幌・大阪で開催されているOSS開発者を増やすための取り組みです。詳しくはこちらの公式ページを御覧ください。そのWorkshopを社内向けに開催しました。

筆者がOss Gate Workshopw@大坂(2017-02-22)へ参加した時の様子を勉強会にて発表したところ、若手メンバーを中心に興味がありそうだったので、社内向けで開催する運びとなりました。

開催後には社員メンバーのOSS開発参加者率が42.8%(3/7)となり、OSS開発参加企業として大きな1歩を踏み出しました。アルバイトや関係者を都合よく含めると60%(6/10)となって過半数を超える結果となりました。

Workshopの流れ

通常のWorkshopは5〜6時間のスケジュールで構成されていますが、就業後に実施するため2日に分けての開催となりました。

1日目ではOSS GateおよびWorkshopの説明を行ない、OSSを動かして作業ログを取り、ミニふりかえりを実施しました。 2日目にOSSへのフィードバックを実際に行い、Workshopのふりかえりを行って終了しました。

両日とも2時間半で構成しました。

1日目の様子

1日目の参加者は6名で、Skype越しに東京からも2名参加してくれました。

アイスブレイクでしっかりと声を出しましょう。

f:id:masayuki14:20170510192538j:plain

作業ログを取るためのデモの様子。

f:id:masayuki14:20170510195524j:plain

OSSを選定後、実際に動かしてみます。

f:id:masayuki14:20170510191852j:plain

f:id:masayuki14:20170510204144j:plain

最後にミニふりかえりでフィードバックポイントを探して1日目は終了です。

2日目の様子

2日目の参加者は4名で、連続参加出来たのはそのうちの2名でした。 1日目のミニふりかえりで見つかったフィードバックポイントを実際にOSSにフィードバックするのが2日目の目標です。 2日目からの参加者2人は、後追いでOSSを動かして作業ログを取っていました。

Issue作成をする役員を学生アルバイトがサポートします。普段と立場が逆転しています。

f:id:masayuki14:20170512202544j:plain

後追いの2人もIssue起票のために議論を交わします。

f:id:masayuki14:20170512202528j:plain

最終的には4名全員がIssueを起票し、2名がPullRequestを行うという結果となりました。

よかったこと

アルバイトメンバーがサポーターとして役員のフィードバック作業を手伝うという、珍しい光景がみられました。社内開催のため和やかな雰囲気で開催できました。就業後の遅い時間に開催してるので、経費でのピザが手配されるなどのサポートもありました。全体的に満足してもらえたようです。

そして、OSS開発の参加者が増えたことが何よりの成果です。

困ったこと

初日にビギナー6人に対しサポーターが2人だったので、十分にサポートができませんでした。そのためOSSの選定に時間がかかってしまったり、フィードバックしづらいOSSを選んでしまったメンバーがいました。また仕事の都合で前半のみ、後半のみなど全てに参加できない人がいたことが残念でした。

皆の成果

それぞれが選んだOSSにIssueやPullRequestの提出を行ないました。

皆の感想

Issueを提出したりPullRequestを出してMergeされたりと、 参加者それぞれの成果が見える形で残ることで満足してもらえたようです。今後は本家のWorkshopでもサポーターとして活躍してもらえそうです。

進行をやってみて

筆者が進行役を務めての個人的な感想です。ちょうど参加したWorkshopの動画が公開されていたので進行方法についてかなり参考になりました。準備が不十分だった自覚があったので不安はありましたが、参加者には楽しんでもらい満足してもらえたので嬉しい限りです。

OSS Gate 運営の方のサポートも特に受けずに開催できたのでWorkshopとしての完成度はとても高くてすごいなと思いました。OSS Gate 運営のメンバーに参加して京都での開催を進めていきたいと思います。

今回の開催にあたっての運営面については個人のブログに書きたいと思います。

masayuki14.hatenablog.com

Seleniumというブラウザ操作を自動でやってくれるツールの紹介

どうも、一人暮らし歴10ヶ月ようやく電子レンジを買いました、いまもんです。
興奮のあまり牛乳を600Wで30秒チンして新品の電子レンジ内を牛乳まみれにしてしまいました。
次はゆで卵でリベンジしてやろうと思います。

さて、面白いツール見つけたのでご紹介します。

Seleniumとは

f:id:spoo-imamoto:20161124042020p:plain

Seleniumはクロスブラウザ、クロスプラットフォームのUIテストツールです。 ブラウザに表示される要素を操作し、取得して想定されうる状態になっているかをテストできます。

macで環境構築しよう

今回はrubyを使うのでgemでinstall かつchromeで動かしたいのでドライバをDLしておきます。

seleniumをinstallする gem install selenium-webdriver

chromedriverをDL https://sites.google.com/a/chromium.org/chromedriver/downloads

DLしてきたchromedriverを/usr/local/bin以下に配置

さあこれで準備が整いました、seleniumを動かしてみましょう。

なにができるのか

Selenium WebDriver — Selenium Documentation

(若干読みづらい)ドキュメントを見てみましょう。 主に要素を検索して中身を書き換えたりクリックさせたりという感じですね、javascriptも実行できるのでn番目の子要素を取得なども可能です!

サンプル

require "selenium-webdriver"

# chrome用のドライバを使う
driver = Selenium::WebDriver.for :chrome

sleep 5 #目視確認用に5秒待つ

# Googleにアクセス
driver.navigate.to "http://google.com"

# `q`というnameを持つ要素を取得
element = driver.find_element(:name, 'q')

# `spookies`という文字を、上記で取得したinput要素に入力
element.send_keys "spookies"

# submitを実行する(つまり検索する)
element.submit

# 表示されたページのタイトルをコンソールに出力
puts driver.title

sleep 5 #目視確認用に5秒待つ

# テストを終了する(ブラウザを終了させる)
driver.quit

参考にした記事 qiita.com

大体こんな感じです。 わかりやすくていいですね。

ちなみにspookiesと検索していますが、titleはgoogleのままなのでgoogleと出力されます。 実行したら裏でChromeが立ち上がるので切り替えて目視確認してみてください。 いい使い道探してます!アイデアあったらどんどん記事にしてください!