読者です 読者をやめる 読者になる 読者になる

paiza開発日誌

paiza(https://paiza.jp)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

ブラウザだけで今すぐ使える!無料の「ゲーム開発環境」Webサービス厳選まとめ!

プログラミング初心者 プログラミング学習 開発ネタ Webサービス紹介

f:id:paiza:20161124131843j:plain
どうも、まさとらん(@0310lan)です。


みなさんは、「ゲーム開発」にご興味あるでしょうか?

最近人気の「Unity」みたいな統合開発環境があれば、かなり本格的なゲーム作りが個人でも可能になってきましたが、実はこのような統合型の開発環境をブラウザ上で実現するサービスがいくつか存在します。

そこで今回は、用途別に厳選したオススメのサービスをご紹介しようと思いますので、ご興味ある方はぜひトライしてみてください!

■本気で作り込める「2Dゲーム」開発環境!

WiMi5

f:id:paiza:20161124131948j:plain
ゲームに使う「ステージ」作りをグラフィカルに設定し、キャラのアニメーションやメインのゲームロジック、最終的な書き出しまですべてカバーする統合開発環境が「WiMi5」です。


シューティング、RPG、パズル、アクション…など、基本的に2Dゲームならどんなゲームでも制作可能で、すでに多くのユーザーが多彩なゲームを公開しています。
f:id:paiza:20161124132051j:plain

開発用のエディタは、2つの画面を切り替えながら作業するように設計されており、「シーンエディタ」と「ロジックエディタ」が搭載されています。


「シーンエディタ」では、ゲームで使うステージやキャラクターなどを構築します。
f:id:paiza:20161124132104j:plain
マウスによるグラフィカルな操作で配置出来るようになっており、用意されている無料のリソースを使ったり、自分で作った画像なども簡単に取り込めます。

また、スプライトシートを読み込んで、自動的にキャラクターのアニメーションを作成する機能など、便利なツールも数多く用意されています。


「ロジックエディタ」では、ゲームとして遊べるようにプログラミングを行うのですが、さまざまな機能を持ったブロックを「線」で繋げていくだけで構築できるようになっているのが特徴です。
f:id:paiza:20161124132134j:plain
基本的な「イベント処理」や「ユーザー入力」などはもちろんのこと、「WiMi5」で用意されている「ランキング機能」「ストレージ機能」「ユーザー管理機能」なども同じようにブロックを繋げるだけで簡単に実現します。


また、「課金機能」も搭載されており、ゲーム内でアイテムの購入などを電子決済で行えるように組み立てることも出来ます。

さらに、中・上級者向けの機能として、JavaScriptでプログラミングを行うことで自分独自の「オリジナルブロック」を作ることも可能なので、開発できるゲームの幅は非常に広いと言えるでしょう。


あと、特徴的な点としては「ドキュメント」や「チュートリアル」がとても豊富に揃っている点が挙げられます。


ちなみに、作ったゲームの書き出し機能も強力で、「WiMi5」のサーバー上に公開したり「Chrome Web Store」へ書き出すことも可能。

iOS / Android」についても、リクエストボタンをクリックすることで、WiMi5のスタッフがオンラインで「Xcodeプロジェクト」や「apkファイル」に書き出してくれるサービスもあります。


<参考>

■本気で作り込める「3Dゲーム」開発環境!

PlayCanvas

f:id:paiza:20161124132329j:plain
3Dゲーム開発」と言えば、人気のゲームエンジン「Unity」を思い浮かべる人も多いと思いますが、似たような操作感覚で開発できるのがコチラの「PlayCanvas」です!


現在もバージョンアップが続いているせいか、ブラウザ上で動いているとは思えないくらい安定性のあるリッチな開発環境が手軽に利用でき、3Dゲーム以外にも最近人気の「VRコンテンツ」の開発も行えるようになっています。


開発エディタは、「プレビュー&テスト」がしやすく、また各オブジェクトのパラメータも編集しやすい設計になっています。
f:id:paiza:20161124132419j:plain
「ステージ構成」の組み立てや「3Dオブジェクト」の細かい調整など、ほとんどの作業をマウス操作で行えるようになっており、キーボードショートカットキーを組み合わせればさらに効率よく作業が進みます。

また、「3D物理演算」「当たり判定」といった主要機能も、3Dオブジェクトに各コンポーネントを追加していくだけで利用できる設計になっています。


さらに、「アセットストア」のようなサービスも搭載されており、他ユーザーが作成した3Dオブジェクトを自分のプロジェクトへ手軽にインポート出来るのは便利です。
f:id:paiza:20161124132432j:plain


基本的なゲームロジックに関しては、専用のコードエディタにJavaScriptで書いていきます。
f:id:paiza:20161124132500j:plain
「コードエディタ」は別タブで開くようになっており、シンタックスハイライトやコード補完なども装備されているので意外に使いやすいです。


完成したゲームは、PlayCanvasのサーバーに公開することが可能で、URLをシェアするだけで友人・知人に遊んでもらえるのは便利でしょう。

すでに、多くのユーザーが作品を公開しているのでご興味ある方はぜひチェックしてみてください!


ちなみに、「PlayCanvas」の開発環境を使わずに、ゲームエンジン単体で利用できるJavaScriptライブラリも公開されています。


<参考>

■初心者でも手軽にゲームが作れる開発環境!

PLiCy

f:id:paiza:20161124132704j:plain
こちらは開発環境と言うよりも自作ゲームを投稿&共有できるプラットフォームに近いのですが、簡単に「アクションゲーム」や「ノベルゲーム」を開発できる機能も搭載された珍しい国産Webサービスです。


PLiCy」で開発したゲーム以外にも、RPGツクール」や「Unity」などで作ったゲームも投稿できるのが特徴で、不特定多数のユーザーにゲームをプレイしてもらい「コメント」や「メッセージ」などをもらうことも可能です。


「アクションゲーム」を開発するエディタでは、すべてマウス操作で「キャラクター」や「地形」などを画面に配置しながら作っていきます
f:id:paiza:20161124132724j:plain
敵キャラなどは、配置するだけでさまざまな動きを自動的にしてくれて、仕掛けのある地形やアイテム、ゴール地点、BGMなど、メニューからどんどん追加していくだけでゲームの骨組みは簡単に構築することが可能です。

また、キャラクターに関しては自作のアバターを作ることも可能で、キーボード・タッチ操作にも自動的に対応してくれるので便利です.


「ノベルゲーム」を開発するエディタでは、豊富に用意された「背景画像」や「キャラクター」を選択し、自分でシナリオを考えながら組み立てられるようになっています。
f:id:paiza:20161124132737j:plain
複雑な条件分岐や、効果的なエフェクト・BGMなどを駆使しながら本格的なノベルゲームが初心者でも簡単に作れるのが醍醐味でしょう。

また、「アクションゲーム」も「ノベルゲーム」もボタン一発で簡単に「PLiCy」のサーバー上へ公開することが可能で、すぐにでも多数のユーザーにプレイしてもらうことが出来ます。


公開されたゲーム作品は、ユーザーからのレビューや獲得ポイントなどに応じてランキング化されており、多くの競合作品が日々更新されています。
f:id:paiza:20161124132751j:plain
興味深い点としては、PCブラウザだけでなくスマホのブラウザからでもゲーム開発ができるように設計されている点が挙げられます。

そのため、スマホひとつでゲームの開発から公開まで完結することが可能で、プラットフォーム内の共有機能からユーザーの評価も同時にチェックできる環境が整うのはスゴイところ…。


ちなみに、プレミアム機能を使うと3D描画のアクションゲームなども開発できるようになっているので、ご興味ある方はぜひチェックしてみてください!


<参考>

■独自の言語仕様で「ファミコン風ゲーム」が作れる開発環境!

PuzzleScript

f:id:paiza:20161124132900j:plain
こちらは、ちょっと懐かしい「ファミコン風」ゲームが作れる開発環境になっているのですが、ちょっと扱いにクセがあり、しかも何らかのプログラミング言語を触ったことのある経験者向けという位置づけです。


扱いは難しいのですが、専用のコードエディタのみで「グラフィックデザイン」「ロジック」「ステージ構築」「HTML書き出し」などが行えるので、慣れると素早くゲーム開発が出来るポテンシャルを秘めています。(そのままWeb上に公開することも可能)


開発エディタは、「コーディング」「プレビュー」「コンソール」が1つの画面にまとまっているので扱いやすいです。
f:id:paiza:20161124132912j:plain
あらかじめ複数のサンプルゲームが読み込めるようになっており、コードを見るだけでどのようにプログラミングすれば良いのか分かるようになっています。

特徴としては、独自の言語仕様によるプログラムでゲーム制作のほぼすべてをカバーしている点です。


例えば、キャラクターデザインをしたければ、コードエディタでカラーに合わせた数値をプログラミングするだけで完成するというお手軽さ!
f:id:paiza:20161124132922j:plain


ステージ構成は、あらかじめ設定した「キャラクター」や「地形」の値を並べていきます。

GUIによるステージエディタも搭載されています)
f:id:paiza:20161124132954j:plain
また、ゲームロジックに関しては、基本的な「ルール」を記述していくスタイルで構築していきます。


簡単に言えば…

「この状態の時に」→「こんな感じに動いて欲しい」
( [ > Player | Crate ] -> [ > Player | > Crate ] )

というようなルールを、1行のコードで表現してどんどん書いていきます。


プログラムをゴリゴリ書いていくのが好きな人にはピッタリの開発環境で、ゲームサウンドなども複数用意されているので、手軽にゲームを作ってURLをシェアするだけでいろんな人に自作ゲームを遊んでもらえるでしょう。


<参考>

■2D・3D・VRなど、あらゆるゲームをカバーする開発環境!

Goo Create

f:id:paiza:20161124133107j:plain
恐らくブラウザ上で利用できるゲーム開発環境としては、最強の部類に入ると思われるのがこちらの「Goo Create」です。

とにかく、どんなゲームでも開発できるポテンシャルの高さと、軽快な動作にも関わらず初級者から上級者まで幅広く扱える多彩な機能が魅力です。


開発エディタは、「ファイル管理」「プレビュー&テスト」「パラメータ調整パネル」「コードエディタ」などがすべてセットになっています。
f:id:paiza:20161124133122j:plain
画面下段には、ゲーム開発において必要となる専用のエディタも起動するようになっています。


例えば、アニメーション処理を自作したい場合には、専用のタイムラインエディタが表示されて、任意のオブジェクトから「キーフレーム」を作って構成することが可能です。
f:id:paiza:20161124133133j:plain


「爆発」「煙」「魔法」のようなエフェクトも、専用のパーティクルエンジンを使うことで、ほとんど無限のパターンを構築することができます。
f:id:paiza:20161124133144j:plain


キャラクターに「動き」をつける場合も、2D・3D関わらず「ステートマシン」を使えばブロックを繋ぎ合わせるだけで複雑な「状態遷移」を実現できます。
f:id:paiza:20161124133157j:plain
「動き」以外にも、簡単なキャラクターのコントロールや、オブジェクトの移動パターンなどをコーディング不要で構築することも可能です!(JavaScriptによるプログラミングも可能です)


ユニークな機能として、HTML / CSS / JavaScriptを使ったオブジェクトを生成することが可能で、これにより「画面UI」などをまるでWebページを作る感覚で制作することが出来るのは非常に便利です。


さらに、最近になって充実してきた「アセットストア」も大きな魅力でしょう。
f:id:paiza:20161124133209j:plain
3Dオブジェクトはもちろんのこと、さまざまな機能をプログラミングしたソースコードなども公開されており、クリック一発で自分のプロジェクトに組み込むことが出来ます。

完成したゲームは、そのままWeb上に公開することが出来るのでシェアするのも簡単でしょう。


また、「Goo Create」のゲームエンジンは単体で利用できるJavaScriptライブラリとしても公開されています。


公式ドキュメントもかなり充実しており、「Goo Create Learn」と呼ばれるチュートリアルコースを最初から進めていけば、自然と高度なテクニックを覚えながら本格的なゲーム開発が出来るようになるのでオススメです。


<参考>

JavaScriptの学習レッスン動画も公開中!プログラミング学習コース

f:id:paiza:20160830130051j:plain
paizaでは、未経験者でも動画を通してプログラミング等が学べる「paizaラーニング就活パック」を公開しております。

ゲーム制作中に「少し手を加えたいな…」「ここだけ変更したいな…」となった場合も、JavaScriptやHTML等を使った基礎的なコードの書き方が理解できていれば、スムーズにクオリティの高いゲームを作ることができます!

paizaラーニング就活パック」は、企業からの「こんな開発スキル・知識を身につけている学生がほしい」という要望と、ITエンジニア志望の学生からの「就活を上手に進めるためにはどうしたらいいのか」という悩みに応えるための特別コースです。

もちろん学生だけでなく、既卒の方、社会人の方、どなたでも受講いただけます。

単純なプログラミングスキルだけでなく、業界・キャリアに関する知識やWeb周辺の知識の習得、選考用ポートフォリオとなるサービス作成までを行える就職特化型の講座内容になっております。

paiza.jp

youtu.be

■まとめ

今回ご紹介したサービスの中で、もし自分がイメージしているゲームを開発できそうなモノがあれば、いずれも無料で利用できるので気軽にチャレンジしてみるのが良いと思います。

ドキュメントに関しては英語の場合が多いのですが、ほとんどのサービスはYouTubeチャンネルを持っているので動画を見ながら学習するのもオススメです。


このように、ブラウザさえあれば今すぐゲーム開発ができるので、ぜひみなさんもオリジナルのゲーム作りに挑戦してみてください!




paizaではスキルのあるエンジニアがきちんと評価されるようにし、技術を追い続ける事が仕事につながるようにする事で、日本のITエンジニアの地位向上を図っていければと考えています。特にpaizaではWebサービス提供企業などでもとめられる、システム開発力や、テストケースを想定できるかの力(テストコードを書く力)などが問われる問題を出題しています。

テストの結果によりS,A,B,C,D,Eの6段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。

http://paiza.jp

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編