シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Webサービス > 3Dゲームを直接ブラウザ上で制作・公開可能な「Goo Create」が楽しすぎる!
注目記事ピックアップ
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
share0
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
share0
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
海外のニッチな情報収集に特化したWebサービス7選が、Google先生より詳しいと話題に!
share0
海外のニッチな情報収集に特化したWebサービス7選が、Google先生より詳しいと話題に!
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
share0
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
share0
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
share0
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
share0
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
share0
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
share0
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
share0
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
ブログ読者に「聞いてみたいこと」を簡単にWebコンテンツ化できる「plyfe」を試してみた!
share0
ブログ読者に「聞いてみたいこと」を簡単にWebコンテンツ化できる「plyfe」を試してみた!
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
share0
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
share0
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
share0
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
iPadに話しながら手描きするだけで、授業風の動画を作って公開できる「Educreations」が超絶便利!
share0
iPadに話しながら手描きするだけで、授業風の動画を作って公開できる「Educreations」が超絶便利!
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
share0
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
Webサービス
2014/11/28 22:30

3Dゲームを直接ブラウザ上で制作・公開可能な「Goo Create」が楽しすぎる!

goo_create_01
どうも、まさとらん(@0310lan)です!

今回は、3Dの素材を使って「ゲーム」を手軽に作れるサービスをご紹介します!

ゲームだけでなく、Webサイトの素材としても使うことが出来るように書きだすことも可能なので、応用範囲は広いかと思います。

Goo Create」です!
goo_create_02


どうやって使うの?
まずは、サイトのトップにあるボタンをクリックしてユーザー登録をします。
goo_create_03


ログイン後のマイページで、「CREATE PROJECT」をクリックします。
goo_create_04


プロジェクト名を入力して、「CREATE SCENE」をクリックします。
goo_create_05


すると、メイン画面となる「製作用エディタ」が表示されます。
goo_create_06
あとは、この画面から様々な編集をしながら、ゲームやコンテンツなどを作成していくことになります。


実際に触ってみよう!
簡単なサンプル事例として、あらかじめ搭載されている素材を使って、キャラクターを走らせてみましょう!

まず、画面がちょっと寂しいので、何か地形を表示してみます。

画面上部にある「ASSET LIBRARY」から、気に入った素材を選択します。
goo_create_07


すると、すぐに選んだ地形が画面に表示されるのが分かります。
goo_create_08


同じ要領で、今度はキャラクターを選択!
goo_create_09


こんな感じで表示されます。
goo_create_10
画面は、「Ctrl」キーや「Alt」キーを押しながら、マウスでドラッグすると調節することが可能です。


そして、左メニューの「ANIMATION」から「走る」動作を選び、画面下の再生ボタンをクリックします。
goo_create_11


これで、キャラクターが走ってくれます!
goo_create_12
もちろん、アニメーションは外部で用意したモノを適用させることも可能です。


また、「Goo Create」には、タイムライン上でキーフレームを追加することで、自作のアニメーションを制作する機能も搭載されているので便利です!
goo_create_13
ちなみに、3Dキャラクターやアニメーションを簡単に生成することが出来るWebサービス「Mixamo」を利用すれば、可能性は無限に広がるでしょう。


さらに、好きなエフェクト効果を選択し、「視覚効果ボタン」をクリックすると……
goo_create_14


簡単に、ビジュアルを変化させることも出来ます。
goo_create_15
上手く使えば、面白い映像作品も作れるでしょう。

基本的な操作は、人気のゲームエンジン「Unity」に近い感覚で使えるので、初心者の方でもすぐに慣れるはず!


GUIベースの作業が可能ですが、JavaScriptによるプログラミングで、すべての制御を行うことも出来ます。

そのため、キャラクターやカメラのコントロール、ボタン、マウス操作など、よく使うであろうスクリプトはあらかじめ用意されています。
goo_create_16
もちろん、ゼロから自分で作ることも可能です。

丁寧なチュートリアルもあり、分からないことを相談できるフォーラムなども用意されているので勉強しやすいです。


最終的に完成した作品は、「Publish」ボタン1発で簡単に書きだすことが出来ます。
goo_create_18


書き出したら、自動的に「Goo Create」側でホストしてくれて、一般公開もできます!
goo_create_19
また、埋め込みタグも生成されるので、自分のWebサイトやブログなどに組み込んだり、プロモーション動画などに使ったりも出来るので応用範囲はかなり広いでしょう。


さらに、Ludeiの「CocoonJS」を利用することで、iOSやAndroidへのスマホアプリとして生成することも可能です。
goo_create_20
専用のアプリから、スマホ端末で動作確認もできるのでかなり便利ですよ!


少しずつ増えてきた「Goo Create」開発事例!
「Goo Create」を活用して制作されたゲームや、Webコンテンツを少しご紹介しておきます。

Angry Birdsのカーレース
goo_create_21
お馴染みの、Angry Birdに登場するキャラクターを使ったWebゲームとなっています。

WebGL対応のブラウザであれば、どんな端末でも動くので、実際にプレイしてどんな感じかを体験してみると良いでしょう。


SKAZKA
goo_create_22
3Dグラフィックを駆使した映像作品がコチラ!

箱庭のような世界をグルグル見回すことができ、さまざまな映像が再生され続けるのですが、その空間に自分でも絵を描くことができる変わった作品です。

さらに、Gifに変換して書き出せる機能も搭載されています。


Goon’s Quest
goo_create_23
3Dの空間を走り回って、アイテムをゲットするアクションゲームです。

マウスを移動させることで、キャラクターが走って行くちょっと変わった操作感ですが、「こんなゲームが作れる!」というサンプルとしては分かりやすいでしょう。


Nikeが提供する3Dサッカーコンテンツ
goo_create_24
3Dで描かれたサッカー選手を使って、マウスをドラッグしながら好きなアングルを決め、決定的瞬間を激写できるという面白コンテンツ!

このようなゲーム以外の用途でも、かなり面白いコンテンツが作れますね。

他にも、たくさんの事例が紹介されているので、もしご興味あれば覗いてみてください!
Goo Create作品一覧


おまけ
最後に、3DCGを駆使した面白いWebサービスも、合わせてご紹介しておきます。

Web上に実装された「3DCGプログラミング」事例10選が、もはや神の領域!
goo_create_25
今回ご紹介した「Goo Create」のエンジンを使った作品も含まれていますが、Web上で実現できることが増えていることを実感できる作品ばかりなので、ぜひ一読くださいませ!


まとめ
3Dゲームの制作ができるWebサービスとして、他にも「Play Canvas」というのがあります。

3Dモデリングなどを始めたければ、「123D」のようなサービスもあって、ブラウザ上で3Dコンテンツを扱えるサービスは着実に増えてきているのを実感できます。

みなさんも、ぜひリッチな3Dコンテンツを活用して、自分だけの作品を作ってみませんか?


written by まさとらん

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る