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

アプギガトップ > Webサービス > コーディング不要のHTML5ゲームエンジン「WiMi5」は、課金実装も可能で全部無料!
注目記事ピックアップ
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
share0
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
share0
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
share0
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
share0
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
share0
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
share0
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
share0
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
share0
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
share0
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
share0
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
share0
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2014/12/17 21:45

コーディング不要のHTML5ゲームエンジン「WiMi5」は、課金実装も可能で全部無料!

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

プログラミング経験は無いけど、PC・スマホ対応の本格的な「HTML5ゲーム」を作りたい人に朗報です!

豊富な機能を持った「ブロック」を繋げていくだけで、ゲームのロジック部分を簡単に組み立てることができる無料のゲームエンジンをご紹介します!

それが、「WiMi5」です!
wimi5_02

どんなゲームが作れるの?
「WiMi5」は、Web上でゲーム開発が行えるサービスで、完成した作品も1発で世界中に公開することが出来ます。

すでに、いくつかのゲームが以下のようにラインナップされています!
wimi5_03 基本的に、2Dであればどんなタイプのゲームでも制作可能です。

 

例えば、人気の数字パズル「2048」や、FlappyBirdライクなゲームが作れたり…
wimi5_04
 

3つ以上のブロックを消すパズルや、シューティングゲームなど、多彩なジャンルが作れます。
wimi5_05 必要なのは、まさにアイデアのみ!

それでは、具体的にゲームを制作していく過程を見ていきましょう!

 
どうやって使うの?
「WiMi5」では、「シーンエディタ」と「ロジックエディタ」と呼ばれる2つのモードを使い分けながらゲームを制作していきます。

今回は、参考例として「キャラクターを移動させる処理」について見ていきましょう!

 

まず、「シーンエディタ」を開きます。
wimi5_06 ここでは、ゲームのステージやオープニングタイトルなど、グラフィックに関する部分を作り込んでいきます。

 

レイヤー構造を形成することが出来るので、奥行きのあるステージを作ったり、動きのあるユニークな舞台やキャラクターをマウス操作のみで制作できるのが特徴と言えるでしょう。
wimi5_07
 

今回は、キャラクターを移動させたいので、スプライトシートなどで画像を用意して「移動アニメーション」を作成します。
wimi5_08 これは、単純に画像のサイズなどを指定すれば、自動的にアニメーション化してくれるので便利です。

 

左右にそれぞれ「移動アニメーション」と「止まった状態」で、4つのパターンを作ってみました。
wimi5_09
 

次に、「ロジックエディタ」に切り替えます!
wimi5_10 ここでは、ゲームを制御するためのロジックを作成していきます。 つまり、ゲームをプログラミングするエディタなのですが、ソースコードを書くわけではないのが最大の特徴でしょう。

何をするのかと言うと、さまざまな機能を持ったブロック同士を、「線」で繋いでいくことでロジックを組み立てられるようになっています。

今回の例で言うと、キーボードの矢印キーを押したらキャラクターを移動させるようにしたいので、「キー入力」を扱えるブロックをまず選択します!

 

そこで、リストから「KeyListener」というブロックを画面にドラッグします。
wimi5_11
 

そのブロックを、青色ブロックと線で繋ぎます!
wimi5_12
この青色ブロックは、今作っているゲームが起動する時に「信号」が出力されるブロックなので、繋げることで「キー入力」の待ち状態を作れるわけです。

 

さらに、矢印キーの「左」が入力されたら信号を出力するように設定します。
wimi5_13
「左キー」を押したら、キャラクターが移動して欲しいので、先ほど作成した4つのアニメーションパターンと接続したいと思います。

そこで、「Animation Selectorブロック」を画面にドラッグします!
wimi5_14
 

そして、作成したアニメーションをドラッグ&ドロップします。
wimi5_15
 

あとは、キーを「押した」「離した」という動作と、アニメーションパターンを線で繋げばOKです!
wimi5_16
これだけで、キーボードの「左キー」を押したらキャラクターが左向きに歩くアニメーションを実現できるのです!

 

ただし、これだとアニメーションするだけなので、前へ移動させたいと思います。

そこで、「Moveブロック」を画面にドラッグします!
wimi5_17
 

先ほどドラッグした「アニメーション」を再度ドラッグしてコピーします。
wimi5_18
 

すると「Vector2D」という項目が空欄になっているので、リストから同じ名前の要素をドラッグ&ドロップします。
wimi5_19
 

これで、移動量を入力できるようになります。
wimi5_20
 

あとは、同じようにキーを「押した」「離した」という操作と、移動を「する」「しない」を線で結べばOK!
wimi5_21
 

左キーを押すと、見事にキャラクターが動いてくれます!
wimi5_22 (反対方向も、同様な操作で実現可能です)

 

このように、やりたい事を直感的に実現できるように設計されているのが魅力で、ブロックの種類を少し覚えれば、すぐに誰でもロジックを組めるようになります。

また、自分で欲しい機能を持ったブロックを作成することも可能なので、上級者も満足できる高度な作品作りが可能です。

 

ちなみに、ブロックが増えてくると徐々に画面が占有されて、ワケが分からなくなってしまいがち…。

そこで「WiMi5」では、フォルダ構造のようなシステムを取り入れており、処理を細分化することでロジックが見やすくなるように設計されています。
wimi5_23 これは、プログラミングする際に、処理を関数にして見通しを良くするイメージと良く似ているでしょう。

 

まだあるこんな機能たち!
完成した作品は、即座に世界中へ公開することが可能です。

メニューから、「Deploy」をクリックします。
wimi5_24
 

「Publish」ボタンをクリックして、ゲームの情報を入力するだけで公開ができるというお手軽さ!
wimi5_25
「WiMi5」側がホスティングサーバーの代わりをしてくれので、面倒な手続きは一切なく、スマホにも自動で対応してくれます。

 

さらに、作ったゲーム内に「課金モデル」を実装することも簡単!
wimi5_26
 

追加アイテムやステージなど、課金する項目を専用ページから作成します。
wimi5_27
 

あとは、課金用のロジックを組み立てるだけで、すぐにPayPal決済の処理が実現できるので、マネタイズも強力にサポートしてくれます!
wimi5_28
 

ちなみに、初心者にも嬉しい「動画チュートリアル」も豊富に用意されています。
wimi5_29
英語ですが、画面の動きを見ているだけで、十分に理解できる内容なので困ることは無いでしょう。

このチュートリアルだけで、ゲーム画面の作り方、ロジックの組み立て方、決済処理、作品の公開まで一通り学べるようになっています。

 

動画を見ながら、さらに別途用意されている「練習用プロジェクト」でスキルアップも可能!
wimi5_30
 

また、「アセットストア」のようなサービスも公開されており、シーンエディタから利用することが出来ます。
wimi5_31
 

エフェクトや、キャラクター素材もダウンロード可能。
wimi5_32
 

効果音やサウンド・エフェクトまで揃っているのは便利ですね。
wimi5_33
「WiMi5」は、基本的にHTML5ゲームを作るためのサービスですが、近いうちにiOS・Androidアプリへ書き出す機能も予定されているようです。

 

おまけ
最後に、Web上で「3Dゲーム」を制作できるサービスを合わせてご紹介しておきます!

3Dゲームを直接ブラウザ上で制作・公開可能な「Goo Create」が楽しすぎる!
wimi5_34
人気のゲームエンジン「Unity」のような操作感でゲームを作れるのが特徴で、純粋なJavaScriptを使ってロジック部分を作れるようになっています。

こちらのサービスも、即座に作品を公開できるようになっているので、ご興味ある方はぜひ一読ください!

 

まとめ
「WiMi5」は、まだβ版で日々バージョンアップを繰り返しています。

ただし、正式公開前にも関わらず完成度は非常に高く、使いこなせば誰でもアイデアを即座にカタチにできるポテンシャルを秘めています。

今まで、ゲーム作りを挫折してしまった人や、アイデアはあるけどカタチに出来ていないような人は、すぐにでも「WiMi5」に挑戦して作品を公開してみましょう!

 

written by まさとらん

 

 

まさとらん

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

twitter:0310lan

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

ページトップへ戻る