Skip to content

前田ブロックなら小学生でも90秒でゲームプログラミングが出来る!?

やあみんな。
今日は朝からちょっとしたハックを試してみたぞ。

なんとenchant.jsのゲームプログラムが、ブロックをかるーく組み合わせるだけで完成してしまうのだ!

今までにも似たようなビジュアルプログラミング環境は存在自体はしていた。
けど、実際に複雑なゲームを作れるかというと、ちょっと難しいかな、という気がしていた。

しかし今回開発した、ブロック型ゲームプログラミング言語、その名も「前田ブロック」は、掛け値無し。チョーカンタンにゲームが作れてしまうのだ。

実は7月に入ってからすぐ、enchant.jsをもっと沢山の人に楽しんでもらおうと思って、ミニ四駆で「走る模型作り」を国民的な遊びへとプロデュースしてしまったタミヤの前ちゃんこと前田さんとずっとディスカッションを繰り返していたんだ。

前田さん自身もenchant.jsのプログラミングを勉強したりしてくれたんだけど、さんざんやってみて、結論

 「清水さぁーん、やっぱコレ難しいよお」

うーん、そうか。
まあ実のところ、僕は日本語より先にBASICを覚えたクチだから、いったい初心者に近い人がどこでつまづくのか、これまでもいろいろ観察してきたつもりだけどなかなか難しかった。

そもそもどこからどこまでが「プログラム」なのか。
どの線を超えたら、プログラムではなくて「ツクール」になってしまうのか。その見極めは非常に難しいと思った。

実際のところ、仕様書みたいなのを書いたらそれがそのまま動いてくれたら随分楽だ。
けど、そんな夢みたいなことは実現しないと思っていた。

文科省がつくったプログラミンというサイトもなかなか良く出来ていたんだけど、いかんせん処理が細かすぎて複雑な動きをプログラミンで作ろうとするとものすごく大変になってしまう。

カンタンなゲームみたいなのは作れても、プログラミンにしろツクールにしろ、それにどれだけ習熟しても実際のプログラミングテクニックは身に付かないという問題があった。

ミニ四駆の話に戻すと、前田さんはもともとクルマが大好きで改造したりして遊んでいたそうだ。

そういうバックグラウンドがあるから、RCカーをビジネスにしてみたりしたのだそうだ。
けど、やっぱりRCカーは子供が遊ぶにはちょっと難し過ぎる。

そして僕もまた、パタヤのAdFestや、汐留の電通で社会人対象のワークショップをやってみて、実は意外とキーボードがネックになっている人が少なくないことを感じていた。

僕はプログラミングの面白さ、楽しさといったものをできるだけ最短距離で伝えたい、という思いがあって、RCカーの楽しさを伝えたいと思ってなんとかミニ四駆を編み出した前田さんはそこにシンパシーを感じてくれたみたいだった。

 「code.9leapみたいな方式はすごくいいと思うんですよ。けど、まだハードルがありますよねえ」

それで先日、あまりにも苦戦した電通マン向けの社内研修の直後、僕たちはenchant.jsの開発チーム三人で山梨の温泉にまででかけていってあれこれ話し合った。

とにかくやっぱり数学が難しいみたいだった。
cosを積分するとsinになる。高校生なら常識でも、大人はもうそんなこと忘れちゃってるんだよね。そういうものを多用するゲームプログラミングは、やっぱりちょっと敷居が高いと感じられてしまうみたいだ。

すると高橋諒が、「パペット、みたいな新しいクラスを作って、ふるまい(ビヘイビア)をミックスインするようなスタイルなら、もう少しカンタンにできませんか」と言った。

それはなかなかいいアイデアだった。
それをベースにPuppet.enchant.jsというプラグインを作ってみた。
ただしこれは公式のものとしては公開していない。
ただし、code.9leapでだれでもforkして試すことが出来る。

開発中のPuppet enchant.js

公式のものにしていない理由は、あまりにもそれまでのenchant.jsと違いすぎて、プラグインとして相応しくないような気がしたからだ。

まず、メインループがない。
その時点でたいていの「古くからの」プログラマーは「こんなの偽物だ」と直感的に思ってしまう。

実はenchant.js、というかHTML5は既にメインループはないんだけど、window.onloadが、いわばメインループのように見えるものとして機能していた。

ところがPuppet.enchant.jsはパペットクラスをクラスファクトリーで創りだしてしまい、game.rootSceneのenterframeイベントなどは隠蔽されている。

ただ、初心者にはwindow.onloadなんて正確にタイプできるかも怪しいし、一文字でも間違ったらちゃんと動かないプログラミングの世界では、window.onloadと打たせることが一つの大きな落とし穴になってしまう。

すると国立情報学研究所の長久さんが「Blocklyと組み合わせられへんかな」と言って来た。
Blocklyというのは、Googleが開発したオープンソースのビジュアルプログラミング言語でHTML5で書かれていて、しかもApacheライセンスだ。

BlocklyとPuppet.enchant.jsは意外と相性がいいかもしれない。
そう思い立って、長久さんつくってくれないかな、と甘いことを考えたんだけど、まああの人もけっこう忙しいし、自分で気に入るもんは自分で作るしかないぜ!

ということでBlocklyのソースコードにダイブ。
ある意味、まったくJavaScriptらしからぬコードになっていて、最初はかなり戸惑ったのだけど、慣れて来たらだんだん、勘所が解って来た。

Blocklyは慣れると非常に優れたビジュアルプログラミングのツールになる。
そんなわけで半日くらいかけて勢いで作ったのが、今回の「前田ブロック」だ。

こんな感じでパペット(ぬいぐるみ)の中身をビヘイビア(動き)を追加していくことで決めて行く。

「タップしたところへスルスル移動」と「一人で登場」の他に、「クリックして動きを選ぼう」をクリックすると動きのメニューが表示される

今のところ用意してるのはこんな感じ。
これだけ組み合わせてもちょっとしたゲームを作ることが出来る。

だいたい、電通の人たちに丸一日説明して、彼らが作ったようなものは前田ブロックなら90秒以内に作れるだろう(例外もあるが)。

これを見た近藤君は「9ミニッツじゃなくて90セカンドコーディングバトルができますね!」と墓穴を掘るような発言をしていたぞ。死ぬ気か。

しかし実際、冗談ではなく、それまで9分かかっていたようなコードは前田ブロックを使うと90秒くらいあれば作れそうだ。もちろんビヘイビアを良く知っておかなければならないが。

しかしこれだけだと「ビヘイビアとやらが用意されてないとダメなんじゃん。ツクールじゃん」と意地悪な人は思うだろう。

今回の前田ブロックのポイントはまさにそこにある。
実は自分でイベントハンドラを直書きすることもできるのだ。

こうするとタップするとシロクマに変身するクマが作れる。
さらにこれだけじゃない。

ジャーン。内臓見えちゃう。
オイオイ、と思わなくもないが、とりあえず内臓みせて、そこから考えようという発想

Blocklyのデフォルトでは足し算までもがブロックで用意されていて、こんなもん本当にだれがやるんだよという感じなんだけど、この程度の「内臓の見え方」なら初心者は触らなきゃいいし、上級者は気持ちよくプログラミングできる。

また、ビジュアル画面ではできないが、ビヘイビアを追加するのもカンタンだ。

enchant.Puppet.Behavior={
	moveLeft:{
		enterframe:function(){this.x-=this.speed*0.1;}
	},
	moveRight:{
		enterframe:function(){this.x+=this.speed*0.1;}
	},
	moveUp:{
		enterframe:function(){this.y-=this.speed*0.1;}
	},
	moveDown:{
		enterframe:function(){this.y+=this.speed*0.1;}
	},
	moveRandomDir:{
        init:function(){this.vx=rand(this.speed)-this.speed/2;
                         this.vy=rand(this.speed)-this.speed/2;
                      console.log(this.vx+","+this.vy); },
		enterframe:function(){
            		this.x+=this.vx;this.y+=this.vy;}
	},

Puppet.enchant.jsのビヘイビアはこんな感じで各イベントリスナーを纏めて書いておくと、いい感じのタイミングで実行される。

たとえばミニ四駆のように、普段は便利なビヘイビアを書いて自分の腕を磨いておき、バトルの時にはブロックを素早く組み合わせてプログラミングするみたいな、そんな世界観も考えられる。

とにかくビヘイビアにできることが強力すぎるので、なんでも作れてしまう。

そしてまずはイベントハンドラの中身を書いたり、ビヘイビアを自分でカスタマイズしたりしながら、少しずつ少年が「プログラミング」の神髄に近づいて行く・・・なんていうシナリオにできたら最高だ。

とりあえずブロックを組み合わせてゲームらしきものを作るところまでやってみよう、と思って作り始めたのだが、予想外のことが起きた。あまりに速く、カンタンに作れるのだ。

特に冒頭で紹介したビデオは、それほど急いで撮ったわけでもないんだけど、カンタンなゲームを作るまでを録画したら、約70秒で完成していた。

僕の頭の中では、ビヘイビアを適切に追加すればシューティングゲームや物理シミュレーションもカンタンに作ることが出来ると思う。

実際、あまりのカンタンさに当の前田さんも「ショェエエエエ」と仰天していたぞ!

これは来月予定されているロサンゼルスの低年齢層向けワークショップにはピッタリだ。

前田ブロックはここから遊ぶことが出来る。

そしてビヘイビアを作ってより前田ブロックの可能性を試してみたい人のためにソースコード一式をhttp://junk.wise9.jp/maeda/maedaBlock.zipに置いてみた。

ぜひ体験して、いじってみて!

このエントリーをはてなブックマークに追加
はてなブックマーク - 前田ブロックなら小学生でも90秒でゲームプログラミングが出来る!?
Post to Google Buzz
Share on GREE

Related posts:

  1. たった99行でシューティングゲームを作る方法
  2. enchant.jsのサウンド機能で、ゲームをさらにカッコよく!
  3. Rubyでenchant.jsを使える可能性(実験編)
  4. 続・Ruby×enchant.jsへの挑戦 / イベントドリブンモデルの実現
  5. Ruby on enchant.js / RubyでHTML5ゲームを作ってみる

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*