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

アプギガトップ > Webサービス > 3Dゲームを直接ブラウザ上で制作・公開可能な「Goo Create」が楽しすぎる!
注目記事ピックアップ
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
share0
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
share0
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
share0
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
share0
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
share0
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
share0
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
share0
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
share0
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
share0
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
share0
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
share0
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
share0
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
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...

ページトップへ戻る