IKEPの制作ブログ

学生エンジニアIKEPの制作ブログです。作品の技術話や制作での経験談などを書いています。

IKEPのwebサイトができました！！

開発

前々から自分のwebサイトを持って見たい！と思っていました。

しかし、自分はweb系を専門にしているわけではないのでレンタルサーバなどはちょっと...

そんな中、Google App Engine(GAE)とDjango、Pythonを学習する機会がありこれを使ってwebサイトを開設できるのではと思い、やってみました。

 

完成したwebサイトはこちら

 IKEP

ドメインも取得しました♪

 

Development

HTML/CSS

JavaScript

WebGL(Three.js)

Python3

Django

Google Cloud Platform(App Engine, Cloud Storage, Cloud SQL)

 

サイトデザイン

GAEとDjango,Pythonを使って開発するのは良しとして、どんなデザインのサイトにするかをまず考えました。WordPressやAdobe Dreamweaverなどの使用も考えました。

しかし、エンジニアとしてのサイトを作るので、コードは全部自分オリジナルで書こうと思いました。

 

ただ、どんなデザインが良いのかわからないので、いろんなサイトを見ました。結果、カードベースのデザインにすることにしました。

考え中のデザイン案↓

まだカードベースのサイトにするだけで背景画像や色などは考えていませんでした。

f:id:IKEP:20181104222846j:plain

ホーム画面の例

(だいたい思い通りに作成できたかと....^_^)

 

 

とりあえず骨組みの制作

前述したようにサーバーはGoogle App Engineを使用しました。サーバー実装にはPython+Djangoを使用。 PythonもDjangoも全く知りませんでしたが、Django公式のチュートリアルが非常にわかりやすくなっているので、サーバー側はなんなく実装できました。Pythonの学習にはPython-izmのサイトを使用しました。

 

フロント側のHTMLとJavaScriptについては問題なかったですが、CSSについてはちゃんと使ったことないので、軽く学習してからフロント作成をしました。

 

ここまでで先ほど↑の画像のような形にはなりました。

 

本格的に開発(こだわったとこ)

ここまでで8割型完成しましたが、もう少しこだわりました。

こだわったことの一つ目は、スマホへの対応です。

対応の仕方としてはレスポンシブ・デザインで行いました。

単純に表示画面のアスペクト比などによって文字サイズを変えたりしています。

 

f:id:IKEP:20181104230443p:plain

f:id:IKEP:20181104230517p:plain

Productページがわかりやすいです。縦画面では作品が縦に並び、メニューバーが3本線(ハンバーガーメニューっていうのかな？)になっています。横画面では作品が横並びでメニューの内容が見えています。

 

こだわったことの二つ目は、管理者ページの作成です。

管理者用ページを作成し、そこからGUIでGoogle Cloud SQLの内容を読み取り、変更できるようにしました(Djangoの機能ですけどね 笑)。これでNewsを更新したいときに、いちいちHTMLをサーバーにデプロイする手間を省きました。

また、Contactページからの連絡は、僕にメールを送る前に、CloudSQLにデータを保存するようにしました。

 

f:id:IKEP:20181104231910p:plain

 

 

こだわったことの三つ目は、WebGLの使用です。

 サイトのデザインクオリティを上げることを考えたときに、どんなデザインコンセプトのサイトにするかを考えました。

自分の専門はXRや3D, CG, インタラクティブなので、その雰囲気を組み込んだオリジナルデザインにしたいと思いました。

そこで調べたらwebGLを見つけました。webGLとはウェブブラウザでインタラクティブCGをレンダリングするJavaScript APIです。

これを見た瞬間、これだ！！ってなりました　笑

しかもThree.jsというライブラリならコードもめっちゃシンプルで簡単！！

軽く勉強しただけで使えるようになりました♪

 

今回、背景とホームのIKEPロゴに使用しました。

f:id:IKEP:20181104233232p:plain

背景は、3Dという奥行き感とCGの基礎であるポリゴンワイヤーフレーム、僕が好きな幾何学模様をコンセプトに作成しました。また黒背景にすることで、エンジニアが好きな黒背景エディタの雰囲気も組み込みました♪

*背景全体にcanvasを広げる方法はこちら

 

IKEPロゴはJS内でI,K,E,Pそれぞれの3Dモデルを作成して表示させました。クリックすることでパーティクル発生&アニメーションするという遊びを入れ、CGアニメーションやインタラクティブ性を組み込みました♪

↓

f:id:IKEP:20181104234312p:plain

 

一応、webGL非対応のブラウザにも対応してます...

CSSのz-index要素を使いHTML全体の重ね順を指定することで対応しました。

後ろから、

 

ただの黒背景

webGL背景

サイトの各要素

 

と並べることで、webGLが無効時は「ただの黒背景」が見えるという風になっています。ちなみにこれでJavaScriptの無効にも同時に対応できました。

js無効にした時の表示↓

f:id:IKEP:20181105001114p:plain

 

 

GAEにデプロイ

 GCPのサイトにDjangoのデプロイ方法が書いてあるので、これの通りにやれば問題なくできます。

ただ、最近GAEのstandard環境でPython３が使えるようになったので、この辺だけこちらのサイトを参考にしました。

 

 

まとめ

念願の個人webサイトがもててかなり嬉しいです♪

GCPを使うと、サーバーメンテナンスやセキュリティなどもGoogleにお任せできるので、非常に簡単でした

ただ、webGLでのクオリティ上げとサイトの読み込み速度の調和を取るのがなかなか大変でした。

 

今まで、このブログを僕のエンジニアサイト的な感じで使ってましたが、自分のwebサイトでできるのは良いですね！

もしかしたら、webサイトに自作ブログを実装してこのブログを使わなくなる時がくるかも？　笑

一つだけ言えるのは、僕の中でこのブログの扱いが「エンジニアサイト」から「本当のブログ」に変わることですね.....

 

 

コロプラ勉強会に行ってきた

インターン


ある日突然サマーインターンシップに応募したからか、ゲームプログラマー向け勉強会＆座談会に来ませんか？とコロプラから連絡をいただきました。
いろいろ悩んだが、大学の授業もちょうど休みだったので参加させていただきました。
てことで行って来たので、学んだことをメモ程度に書いていきます

f:id:IKEP:20181006140937j:image

 

イベント全体の流れ

会社説明＆勉強会→オフィスツアー→コロプラ若手エンジニアとの座談会
会社説明とオフィスツアーはざっくりとした感じで、勉強会と座談会が中心でした。

 

勉強会&座談会
勉強会では白猫プロジェクトを題材に、コロプラ流の開発手法を話されていました。
座談会では1グループ6人に1人若手エンジニアが付き、1人あたり25分×3人でした。
7グループあったので、3/7人の方と話しました。


勉強会＆座談会と質疑応答などで学んだこと


コロプラ流ゲーム開発手法(題材：白猫プロジェクト)

- 開発フローは「プロトタイプ版開発→承認→α版→β版→βテスト→リリース」

 

- プロトタイプ版開発

  • 考えたゲームが面白いかどうかを確認するために仮として作成
    →ラピッドプロトタイピングによって「とにかく速く、多く」試作品を作成。デザインは仮のものでOK
  • 「ゲームとしての新規性」、「ユーザーに受けるのか」、「面白いか」といったことが足りなければボツに。(白猫プロジェクトはもともと2Dゲームだったが、新規性を求めて3Dになったらしい)
  • 面白いと思って考えていたゲームが、実際に作ってみると面白くない時がある
    →早い段階でラピッドプロトタイピングを行うことで面白いと思ってもらえるものを見出す

 

- 承認

プロトタイプを作成し会社からの承認をもらえたら、リビルド

- α版開発

  • ゲームに必要な各要素(ステージ選択メニュー、バトル、ガチャ、マルチプレーなどなど)を作成していく
  • これらの各要素ができているのがα版(各要素の連携はβ)

 

- β版開発

  • α版で作成した各要素をつなげ、ゲームを繰り返しプレイできリリースできる状態にする
  • βテストを行った結果、改善&デバック&ブラッシュアップ

 

- βテスト

  • プロジェクトチームでのデバック
  • 実際にプレイしてもらう環境でのテストが重要
  • ゲームをしてもらう人を増やしていき、最終的には全社員にやってもらう
    →チーム内では思いつかない改善点やバグ&クリエイター以外の人からの意見などを修正&デバック&追加
    →何回も繰り返すと、指摘が鋭くなりゲームが洗練されていく

 

その他
  • コロプラではVRゲームはUE4で制作。UnityよりもUEの方がクオリティが出しやすい(クオリティ優先？)
  • 通信負荷軽減のために、次のステージやミッションで必要なデータをゲームプレイ中の裏側でダウンロード
    →通信時間が短いように感じさせる
  • 敵AI実装について
    • フレンドのAIは、最初は賢かったけど強くて敵を全部倒してしまいユーザーが何もしなくてよくなるので、バカにしてユーザーが頑張るように
    • 最初は、勝てるけど強いもので作成＝＞そこから弱く(最初に弱く作って強くするのは難しいから)
    • ユーザーに体験してほしいことを考える=>AI実装(いっぱい倒す快感を与えたいなら=>多数の雑魚キャラが集まってくるように)
  • 学生のゲームに求めるのはクオリティよりかは、ユーザーに面白いと思ってもらえるか
  • ゲームが重たい時に役立つ＝＞Unityプロファイラー、Xcode Instruments Time Profiler
  • gitができないと、仕事できない。音声など重たいデータはgitのモジュールとか利用
 

感想

  • ラピッドプロトタイピングは有用だなと思った。ただ、学生にはしんどいなってのが本音...
  • ゲームの進行に合わせて作成していくのではなく、各要素をバラバラに作成するのは新鮮だった。チーム開発において、ゲームの進行に合わせての作成は開発速度が遅くなるのはわかるけど、個人開発にも使える制作手法なのでは...
  • プロトタイプ、α、β、の各開発段階の様子を見せていただけたが、プロトタイプでそれなりの形になってて驚いた。また、βテストでの指摘例がかなり細かいとこまであったので、さすがプロだと感じた。
  • 実際のプレイ環境でのテストの一例で、「通信テストのために山手線に乗ってぐるぐる回りテストした」とあり、面白いと感じつつも、とことん突き詰める姿勢にプロだと感じた。
  • VRをUEで作成は意外だった。Unityを使っているのは知っていたが、UEも使っているとは....。(UE勉強しなければ...笑)
  • 私もgitを使っているが、もう少ししっかりやっとくべきかも....。ゲーム以外でも使えるし

 

おまけ

RGBカメラ画像処理による関節角度推定

開発 OpenCV 画像処理

大学の画像処理の実習で、実験の課題が出されました。

実験の内容としては、「今まで学習したことを使って、実験する価値のある画像処理プログラムを作成する」ことです。「実験する価値がある」というのは、すでに実現できるとわかっているものではなく、実験してみないとわからないものということでした。

 

そこで私はRGBカメラによる人間の関節角度推定システムを作ることにしました。

普段、開発をしていてRGBカメラしかない状況で、「深度センサーを組み込んだRGB-Dカメラのような距離情報を取得できるカメラがあれば…」ということが多々あります。例えば、iPhoneアプリ開発で、iPhoneのカメラを使ってセンシングする場合など.....

Kinectのような深度センサーが組み込まれたRGB-Dカメラなら関節推定はできる(と思う)のですが、RGBカメラでは普通にはできません。

 

 

システム構成

今回は腕の関節角度推定をしました。

肌色領域抽出とテンプレートマッチングがベースのシステムになっています。

 

簡単な流れとしては、

1. 上腕と前腕部分をテンプレート画像として抽出

2. 腕を任意の角度に曲げて角度推定開始

3. 上腕と前腕部のテンプレート画像から腕の状態の候補となる合成画像を生成

4. 角度推定を開始したときのフレーム画像と3の合成画像を肌色抽出し、2値化

5. 4で生成した二枚の画像でテンプレートマッチングし類似度計算

6. 3で肘関節、肩関節の角度を変えながら3~5を繰り返す

7. 最も類似度が高かった時の合成画像の状態を推定結果として出力

となっています。実際の画像で見ていきましょう↓

 

1. 上腕と前腕部分をテンプレート画像として抽出

マウスドラッグで赤色の枠を出し、画像切り出し部分を選択します。

f:id:IKEP:20180805142001p:plain

切り出した画像が↓

page6image1768224　　page7image1772480
 

 2. 腕を任意の角度に曲げて角度推定開始

適当に腕を曲げて角度推定開始です。今回、角度推定開始はキーボードのpキーを押したら始まるようにしました。

 

3. 上腕と前腕部のテンプレート画像から腕の状態の候補となる合成画像を生成

一度、上腕に対して前腕部を回転させた画像を生成し、その画像全体を回転させています。その結果の合成画像が↓

f:id:IKEP:20180805143821p:plain

前腕部回転により肘の回転、そのあとの画像全体の回転によって肩の回転の候補を作成しています。

 

4. 角度推定を開始したときのフレーム画像と3の合成画像を肌色抽出し、2値化

合成画像に対して肌色領域抽出して2値化したものです↓

f:id:IKEP:20180805150155j:plain

 

5. 4で生成した二枚の画像でテンプレートマッチングし類似度計算

6. 3で肘関節、肩関節の角度を変えながら3~5を繰り返す

7. 最も類似度が高かった時の合成画像の状態を推定結果として出力

 

 

プログラム

以上のことをプログラミングしたのが↓

Visual Studio、C++、OpenCVで実現しています

今回は腕の肩側が左側に、手のひら側が右側でカメラに映るのを前提にしています。

 

 

 

動かしてみる

コンソールに出力されてる文字が見にくいですが…

肘関節角度は肘の開き具合です。肘を曲げずに腕がまっすぐなら180度、完全に曲げたら10度(?)です。

肩関節は腕を水平にしている状態が0度、そこから下に降ろした状態が-90度、上にあげた状態が90度です。

 

まとめ

色々試行錯誤して作った結果、そこそこいい感じに推定できているのではないかなと....

ただ、計算速度が遅すぎるのは問題ですが....笑

やっぱ、RGB-Dカメラを使うのが手取り早いです..... (^^;

 

 

Swiftによる自作開発アプリの紹介

開発 Swift

私が自作&現在リリースしているアプリを紹介していなかったのでこのブログでも紹介しておきます。

プログラミングを始めて間もない頃に作ったものですので、2年弱前(?)くらいのものかと....。IKEPはApple信者であることもあり、その頃からSwiftを勉強してiPhone用とMac用を1つずつ作りました。

それがこちら↓

 

Eye Break Timer 

f:id:IKEP:20180801225355p:plain

 

iOSアプリはこちら↓

Binary Calculator 

f:id:IKEP:20180801230016p:plain

 

 

２つとも自分が使いたいからという理由で作りました(笑)

EyeBreakTimerはこの頃開発のためにPCを触る時間が増えたことによって、時間を忘れて作業してしまうのを防ぐために作りました。作業を邪魔しないことが大前提になっているため、ステータスバーでの表示とMacのスリープとの連携によって全自動化を図りました。

BinaryCalculatorは大学の授業課題(宿題)の中で2進数などを扱うことが多々あった時期に、サボるために作りました(笑)

 

よかったらダウンロードして使ってください(^_^)/

 

余談

AppStoreへのリリースは日本では20歳にならないとできないと知った時は悲しかったです.....。よって20歳になるまで1年近く公開せずに眠っていたのです~~~

 

また最近、たまたま私のアプリを紹介してくださっているブログ(?)記事を見つけたので載せときます~↓

 Macで眼精疲労・疲れ目をを軽減・対策する設定方法

 

追記

WindowsバージョンのEyeBreakTimerを作り、リリースしました！

C++によるWindows API直たたきで作成しました。

↓のGitHubリポジトリでOSSとして公開しています！

github.com

アプリ利用はリリースページのインストーラを使えばインストールできます！

本格的なゲームを作ってみたい ~進捗その1~

開発 Unity

今までUnityを色々勉強したり、何か作ってみたりとしてきたが、(Unityを使った制作物で)商品として売り出せるような作品を作ってないなと思い、商品レベルの本格的ゲームを最初から最後まで1人で作ってみるかと思い立った。

 

そこでどういうゲームにするかを考えたときにちょうど知ったのが、Nintendo Switch「ゼルダの伝説 BREATH OF THE WILD」

販売からかなり時間が経っていましたが、友人から神ゲーと言われて少しやってみると、神ゲーでした　笑

知らない方はこちらから~(Youtube)

 

まあ、そんなこんなでこんな神ゲーが作れないかなと.....w

RPGはUnityの勉強で簡単なのは作ったことがあったんで、RPGで作るかと決定。

(RPGゲームの勉強で作ったやつ~↓)

 

 

で、とりあえずRPGで方向は固まったんで、アイデア出しをしてどんなゲームにするかは自分の中では決めました。(細かいことを変更するかもなんで、まだ内緒...)

プラットフォームとしてはPCとスマホの両方を考えています。

 

ゼロから開始して1ヶ月ほどでこんな感じ(スマホ版収録)↓

 

最初の1ヶ月はステージ作成と移動制御関連ばっかだったような.....

 

で、さらに1ヶ月(制作2ヶ月目)ほどでこんな感じ(PC版)↓

 

だいぶ発展しました。ジャンプや泳ぐのができるようになり、敵の種類も増え攻撃してくるようになりました。最後のワープはエフェクトだけ作りました(ゼルダBotWのワープシーンのマネですw)。

 

このプロジェクトのプログラムはこちらから~(Github)

UnityプロジェクトがGithubにあげれなかったのでスクリプトだけ(随時更新します)

 

以上、進捗その1でした。これからもたまに進捗書くと思いますので、またその時に~

Processingを使ったインタラクティブコンテンツ作品 with OpenCV, ARToolKit

開発 Processing AR,VR,MR

大学での実習を通して、Processingを使ったインタラクティブコンテンツを作成しました。

Processingを使うのは初めてという中で、ある程度形になったものをここに上げておきたいと思います。

(課題提出締め切りギリギリまで制作していたので、ソースコードは汚いです.... m(_ _)m)

 

画像処理インタラクティブコンテンツ

カメラ入力を使ったインタラクティブコンテンツを作成せよ、と言う課題が出されました。

そこで私はOpenCVでの画像処理を組み込んだコンテンツを作成しました。

完成品はこちら↓

 

モグラたたきです。カメラを机に向けて設置して、机の映像に対応した部分を叩くとモグラを叩くことができます。アルゴリズムを試行錯誤したら、手が早く動いてもトラッキングの精度が落ちないようにできました。

 

OpenCVでは顔認識はデフォルトで簡単に行えるようになっているのですが、手形状認識はできません。そこで、手形状認識をしてバーチャルなものに触れることができるものを作ろうと思いました。

普通のRGBのwebカメラで映像を取得し、HSVでの肌色抽出で実現しました。この肌色領域を取得して、その領域とモグラのCGが接触したらモグラを叩いたと認識させています。

 くわしく詳しくはこちら(プログラム)

 

 

ARToolKitを使ったオブジェクトの3次元制御ARシステム

次にARToolKitを使ったARインタラクティブシステムを作成せよ、という課題が出されました。

ARToolKitはARマーカーを使って仮想オブジェクトを表示します。しかし、マーカーをオブジェクト表示だけに使うだけではつまらないと思い、コントローラとして使おうと考えました。

完成品はこちら↓

 

マーカーを手で隠したり見せたりする事でボタンとしての機能を持たせつつ、マーカーの回転角度をアフィン行列で取得。その中から平面に対して垂直な軸を中心とした回転角度を抽出し(その他の軸の無駄な回転角度を削る)、この角度を使ってオブジェクトをアフィン変換しています。

回転軸切り替えをした時に、オブジェクトに適応しているアフィン行列を今までの変換行列に掛け合わせることで、今までの回転操作の状態を保存したまま異なる回転軸でさらに操作を行えるようにしました(線形代数学ちゃんと勉強しといてよかった…(^^))

詳しくはこちら(プログラム)

 

感想

普段、Unityの方をメインで使うんでProcessingはあまりやった事なかったですが、やってみると面白かったのでもっと勉強したいですね(^_^)

なによりも描画関係がすごく簡単にできるのが衝撃的でした。

 

 

追記

最終課題で、上記のことを全部混ぜたレーシングカーゲームを作りました。ARマーカーの回転角度で車を操作、手認識とオブジェクトへの接触判定でスピードアップです。

ついでにランキング機能を組み込みました。ランキングの順位は、(速くゴールする)>(遅くゴールする)>(ゴールできなか ったときの走行距離⻑)>(ゴールできなかったときの走行距離短)の順です。

完成品はこんな感じです↓。昔のゲームによくある8ビット風の世界です♪

 

 

PC内蔵のカメラを使っているので、映像の精度が悪いです....

工夫点としては、

・「ゴールできないかもしれないリスクを背負うが、スピードアップして走行距離をかせぐ」か「走行時間は遅くなるが、着実にゴールするのを狙う」など、ユーザの判断によって、ユーザ個人個人の楽しみ方を自然に提供したところ

・ARマーカー、画像処理による操作をインタラクティブかつ直感的なものになるよう設計

などですね

 詳しくはこちら(プログラム)

 

 ただ、自分がunityでの制作に慣れたせいか、シーンの切り替えがprocessingではやりにくいなと感じました　笑

AfterEffects, PhotoShopでVFX、アニメーション動画制作

今回はプログラミング関連ではなく、Adobeで映像制作をした時のゆる〜いお話です。

 

VFX制作

大学生になって初めてPCを購入し、本格的な映像制作ができる環境になり早速Adobeをはじめました。で、VFXというかっこいいジャンルを知り、何もないところからmacが出てくるVFXを作りました。

素材は二枚の写真

f:id:IKEP:20180629235000j:plain

f:id:IKEP:20180629235018j:plain

全く同じ構図でmacを置いた写真とと置いていない写真です。

 

まずはphotoshopで加工〜

macを部品ごとに分解します。

f:id:IKEP:20180629235324j:plain

最終的には、キーボード、トラックパッド、ディスプレイ、USB差し込み口、本体上部・下部、アイコン、ステータスバーに分解しました。

 

この分解したのをAfterEffectsで動きをつければ完成です。

（作ったのが2年前でなので制作中のスクショが残っていません.....）

 

 

 

 アニメーション制作

しばらくしてアニメーション映画「君の名は。」で一大ブームを起こしました。Youtubeでは、 実写で予告編を再現してみた動画が流行りました。そこで僕は大学キャンパスの風景を使ったアニメーションの予告編を作ってみました(笑)

今回は正式な予告を真似てみたものです。正式予告はこちら

キャンパスを歩き回って写真を撮り、その写真を「君の名は。」風に加工し、AfterEffectsの下準備。例えば↓

f:id:IKEP:20180630000813j:plain

↑これをAfterEffectsで動かすために雲を切り取り、欠損部分を修正↓

f:id:IKEP:20180630000955j:plain

 

編集様子(1万倍速?)↓

 

で、完成品がこちら↓

 

 

おまけ「なぜ映像制作をしていたのか」

僕は幼稚園から高校生までずっとサッカーをしていました。中学生の頃、自分たちの試合の分析や敵チームの傾向分析などのために、カメラで試合の動画を撮ることがありました。その時に撮り方がうまいと言われ、映像に興味を持ちました。(単純w)

そこで、映像音響についての勉強ができる今の大学に行きました。しかし、大学に入ってプログラミングに触れ、映像以外のモノづくりにもハマりました。つまり、僕にとって映像制作は今の僕の原点なのです(笑)