オススメ機能
Twitter
お気に入り
記事履歴
ランキング
お気に入りタイトル/ワード

タイトル/ワード名(記事数)

最近記事を読んだタイトル/ワード

タイトル/ワード名(記事数)

LINEで4Gamerアカウントを登録
プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
特集記事一覧
注目のレビュー
注目のムービー

メディアパートナー

印刷2011/10/22 23:39

イベント

プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート

画像集#010のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
 2011年10月21日,ユビキタスエンターテインメント(以下,UEI)は,東京・神田でHTML5ゲームエンジン「enchant.js」のユーザーイベント「enchant.js meetup!」を開催した。
 このイベントは,enchant.jsやenchant PROの紹介を兼ねつつ,enchant.jsの活用事例などをユーザーから募っての発表や懇親会などを含む交流の場として設けられたもの。当日は,当初の予定から大幅に拡大された180人収容の会議室が用意されたものの,それでも足りないほどの応募者が集まった。


enchant.jsはこうして生まれた


UEI CEO清水 亮氏
画像集#003のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
 冒頭,UEI代表の清水 亮氏から挨拶が行われ,今回のイベントではenchant.jsを通じて,「プログラミングの面白さを僕達がどう考えているか,enchant.jsをどんなふうに楽しくしていきたいかを感じ取ってほしい」と来場者にアピール。

 続いて,9leapプロジェクトリーダー伏見遼平氏より,enchant.js開発の経緯が紹介された。

 発端は,今年の3月ごろに清水氏が漏らした「昔あったファミリーベーシックみたいなものがほしい」という言葉から始まったという。その場にいた学生達は「ファミリーベーシックってなに?」と思いながら聞いていたらしいのだが,調べると,テレビにつないで子供がプログラミングしてゲームが作れるものらしい。こんな感じかなと当時大学1年だった田中 諒氏が1週間くらいでさらさらっと作ったのがenchant.jsのα版となるものだ。

画像集#011のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート 画像集#012のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート

UEI 9leapプロジェクトリーダー伏見遼平氏
画像集#004のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
 さらにコードが短く,クロスプラットフォームで拡張性も高いなど,enchant.jsの特徴などが紹介されたが,ここでは詳細は割愛する。ぽろっと出た情報としては,まだ公開はされていないが,3D用のプラグインも用意されているようなので楽しみにしたい。
 そのほか,どこでも遊べる投稿型JavaScriptゲームサイト「9leap」という発表の場が用意されていることや,さまざまな地域でプログラミングキャンプを実施するといった,普及活動などについての紹介が行われた。

 プログラミングキャンプでは,プログラミング初心者に対し,午前2時間でenchant.jsの基礎を教え,午後4時間で1本ゲームを作らせている。ちょっとハードルが高そうに感じられるかもしれないが,仙台・札幌で行ったときはほぼ全員,沖縄では2時間しか時間がなかったらしいのだが,それでも半数くらいはゲームを仕上げて発表したという。
 ちなみに,UEIの社内ではさらに過酷なトレーニングが行われているそうで,12時間で21本のゲームを作らされたこともあったそうだ。そういうことができるのも,enchant.jsがあったればこそだと伏見氏は語る。

UEI 田中 諒氏
画像集#005のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
 enchant.jsのコア部分を作り上げたという田中 諒氏からは,enchant.jsの基本構造や基本オブジェクトについての簡単な紹介が行われた。各オブジェクトの階層関係や,どういう用途で用いられるものかなどが,実演込みで解説された。
 読んで理解できるかは置いておいて,ここで用いられていたプレゼン資料は,ここにあるものとほぼ同じなので,興味のある人はぜひ参照していただきたい。


ユーザーによる活用事例


 UEIの開発者による概要紹介に続いて,ユーザーによるライトニングトークが行われた。

enchant.js におけるチーム開発手法(@blankblank)

@blankblank氏
画像集#006のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
 まずは,9leapで多くのゲームを発表している@blankblank氏だ。グラフィックスを担当する大学の先輩と二人でゲームを作っているという氏から,enchant.jsでのゲーム開発のコツのようなものが紹介された。

 最初はレベルデザインについて。レベルデザインは,プログラマーが行うとは限らないことや,あとで変更しやすいものが望ましいことなどから,JSON形式でデータを記述することが勧められていた。XMLを簡易表記にしたような感じのものだが,読みやすく,データの変更も柔軟にできるという。

画像集#013のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート 画像集#014のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
画像集#015のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート

 また,共同開発を行ううえでは,「一緒に同じアニメを見ること」の重要性が強調された。要は,グラフィックス担当などと共通のバックグラウンドを持っておけば意思疎通が速いという話だが,例として,ロボットもののゲームを作っていたときのエフェクトで「美琴がキレたときの奴」というだけでちゃんと望みのものが仕上がってきたことなどが紹介された。

画像集#016のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート

 もう一つ,目的と手段の階層構造を把握することの重要性が説かれた。ちょっと分かりにくいかもしれないが,ある程度込み入った事象では「〜をしたいので 〜する」といった目的と手段が何段にも積み重なることが普通である。「女の子にもてたいので,すごいものを作ってみせる」「そのためにゲームを作る」「そのためにenchant.jsを使う」といった感じになるのだが,それぞれで別の手段を取ることが可能だった場合,手段の部分だけでは,どの階層のための手段かが分からないので,それを明確にしないと意思疎通が難しいということらしい。いま一つよく分からない部分もあるが,これで困ったことがあったのだろう。

画像集#017のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート 画像集#018のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート


プラグイン localStorage.enchant.js

東京芸者エンターテインメント ymrl氏
画像集#007のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
 次に登壇したのは,東京芸者エンターテインメントでインターンをしているというymrl氏だ。氏は,東京芸者エンターテインメントでスマートフォン用ゲーム開発にenchant.jsを使っている。enchant.js以前から,HTML5を使ったゲーム開発を行っており,Twitterのつぶやきで攻撃を行うTweetShootingなども公開しているのだが,機種ごとの入力操作の違いなどでかなり苦労をいていたようだ。そういった部分をシステム側でサポートしているenchant.jsについては,「これがもっと早くあれば……」苦労しなくて済んだのにと語っていた。

画像集#019のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート 画像集#020のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート

 今回は行われたのは,3G回線の遅さ,不安定さを解消するためのLocalStorageプラグインについての概要紹介だ。これは,よく使う画像を,ブラウザのLocalStorageに保存しておこうというもの。LocalStorageというのは,いわばCookieの大きい奴のような感じで,URLごとに関連した文字列を保存しておける仕組みだ。本来文字列しか扱えないのだが,Base64コーディングすることによって,画像を保存し,ネットワークからダウンロードすることなしに使ってやろうというわけだ。
 ymrl氏は,enchant.jsのpreloadメソッドと同じ用に使えるpreloadToLocalStorageをプラグインで拡張している。これは,指定されたアドレスの画像がLocalStorageにあれば,そこから,なければネットワークから読み込むというものになっている。

画像集#021のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート 画像集#022のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
画像集#023のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート 画像集#024のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート

画像集#025のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート 画像集#026のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート

画像集#031のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
 LocalStorageの性質として,サーバー側で画像が書き換えられても,LocalStorage上のものが読み出されて反映できないという欠点があったのだが,これについては,URL指定時に「#20111021」のような日付文字列を使うことで回避しているという。
 これによるパフォーマンスについては,ネットワークからの読み込みで395msかかっていた画像が83msで表示できることがデモされ,パフォーマンスアップに繋がることが示された。なお,キャッシュに残っていればもっと速いのだが,スマートフォンなどでは,キャッシュはあまりあてにできないとのこと。
 preload部分を書き換えるだけで使えるうえ,スマートフォンなどで通信量削減に役立つ面白いプラグインだ。

画像集#029のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート 画像集#030のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
画像集#032のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート 画像集#033のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート


ゲーム開発日誌,私の場合

伊藤(@pbrocky)氏
画像集#034のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
画像集#008のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
 一般ユーザーからもう一人,最近,9leapに彗星のごとく登場して注目を集めているという伊藤(@pbrocky)氏が登壇し,パズルゲーム「Saturday Night Aventure サタデー・ナイト・アバンチュール」の制作事例を紹介した。
 9leapでは,主に学生用のコンテストが繰り広げられているのだが,学生以外にも門戸を開いた9日間チャレンジのプログラミングコンテストも開催している。お題が発表されてから締め切りまで9日間というコンテストでいかに開発をしていったのかなどが紹介された。実際のところの開発期間は8日間で,enchant.jsの勉強を習得を兼ねて伊藤氏が挑んだのはパズルゲームのコンテストだ。かつてポケコンPB-100用に作ったゲームを移植しようと試みたという。
 そのパズルというのは,雑誌に掲載されていた1行落ちモノパズルを独自に連鎖対応に改造したもので,15年ほど前にパソコン通信などで公開していたものだという。

『ポケコンジャーナル』1995年3月号より
画像集#035のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート 画像集#036のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
画像集#037のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート 画像集#038のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート

 ポケコン用の1行表示を再現してみると,いかにも地味だったので,アレンジが試みられたという。

画像集#040のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート 画像集#041のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート

 イメージとして目標となったのは,「DanceDanceRevolution」。画面表示などが似ているからとのこと。「ダンス」というところからの連想で出てきたのが「ジュリアナ東京」。背景なので,あってもなくてもゲーム自体には関係ないようなのだが,アニメーションさせるなどの構想に従って,かつての巨大ディスコのバブリーな雰囲気を再現すべく,イラストを描いていったそうだ。

画像集#042のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート 画像集#043のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
画像集#044のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
画像集#045のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート 画像集#046のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート

画像集#047のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
 発表したのちも,感想を聞きつつ改良を重ねていったという。いちばん多かったのは「なんで1行なのか」というものらしい。ポケコン時代には1行でも立派にゲームが成り立っており,そのゲーム性は今回のゲームでも再現されていたようなのだが,1行表示である必然性は理解されなかったようだ。続けてそのような感想がきたことから,伊藤氏は,対戦モードをつけるなどの対応を行ったほか,操作性などについてもプレイした人の意見を取り入れて改善を図ったという。

画像集#049のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート


Androidアプリを手軽に作成「enchant PRO」

増井健斗氏
画像集#009のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
 続いて,イベントのあった10月21日に公開されたばかりの「enchant PRO」に関する紹介で,UEI秋葉原リサーチセンターの増井健斗氏から解説とライブプログラミングが行われた。

 enchant PROは,JavaScriptとHTMLでは制約が多くてできなかたようなことを,Android専用版とすることで解決した特別版のenchant.jsだ。基本的な実行部分はJavaScriptとHTML5のままのようだが,OpenGLをハンドルすることができたり,端末の各種センサーやカメラといった機能にアクセス可能で,単体のアプリにパッケージングして配布可能といった特徴を持っている。

画像集#051のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート 画像集#052のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
画像集#053のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート

画像集#056のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
 OpenGLでポリゴン表示ができるようになったのだが,扱いがかなり簡単そうなのが印象的だった。まず,Sprite3Dオブジェクトを生成し,matrixプロパティでポリゴンモデルを指定する。2DでSpriteオブジェクトを使ったのと同様の流れだ。適用するテクスチャは,Surface3Dオブジェクトで指定する。それを,Sceneオブジェクトの3D版であるScene3Dのリストを追加していけば表示されるという仕組み。最低限のものであれば,数行のコードで3Dオブジェクトが表示できる(スプライト表示のときとほとんど手順は変わらない)。

画像集#055のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート 画像集#057のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート

画像集#058のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
 さらに,カメラに映し出されたARマーカーにマッチングさせるあたりもほとんど手間いらずで実現できるようだ。enchant PROのライセンス料は,1アプリあたり5万円※事実誤認がありました。5万円の通常ライセンスにはARマーカー使用料は含まれていません。お詫びして訂正いたします)。ARマーカー4個を同梱したKARTエクステンションは50万円となっている。

※初出時に,5万円の中にAR技術ライセンス料も入っている表記で掲載してしまいましたが,明らかな間違いです。お詫びして修正させていただきます。

画像集#059のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート


enchant.jsはどこに向かうのか?


画像集#060のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
 イベントの最後には,再び登壇した清水氏からUEIの近況やenchant.jsの目指すところなどが語られた。イベント当日には,同社で初めてのスマートフォン用ゲーム「決戦! 戦国vs三国志」が配信され,現在,記録的な登録者を集めているという。
 清水氏から,来場者へ贈られたメッセージは「プログラミングは最高だ」というもの。プログラムを覚えたいという人に対して,数年前ならRubyを勧めていたと清水氏は語る。しかし,優れた言語として人気を集めるものの,Rubyはなかなかメジャーになれない。なぜかというと,Rubyの主要目的はWebサービス関係となっており,プログラミング以前のところで難題が多すぎるのだそうだ。

画像集#063のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
 プログラミングは楽しくなければならないと考える氏が選んだテーマがゲームであり,今後,プログラムを目指すならHTML5(とJavaScript)が最適であると判断したという。HTML5は,現在のFlashと同等以上の意味を持ったものとなり,「HTML5を制するものだけが未来への切符を手にすることができる」と清水氏は語る。
 そのためにも,UEIはenchant.jsに本気で取り組んでいくという。また,enchant.jsでプログラミングを楽しむだけでなく,仕事でも使いたいという人のために作ったのがenchant PROだと氏は語る。

画像集#061のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート 画像集#062のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート

画像集#064のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
 UEIでは,前述のように現在,学生向け(25歳以下を対象)に9leapでさまざまなコンテストを行い,毎月1回,大人も参加できる9日間のコンテストを開催している。
 とはいえ,社会人に9日間は厳しいなどの意見は多いようで,趣味としてのプログラミングをもっと広めたいとのことで,新たに“無差別級9leap”として「Open leap」を立ち上げることを発表した。

画像集#065のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート 画像集#066のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート

画像集#068のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
画像集#069のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
 Open leapでは,ソースコードをMITライセンスで公開することを条件に,プログラミングコンテストなどを展開していく。第1回は11月1日〜12月31日までの2か月間募集され,テーマは自由,enchant PROも使用可能といった,まさに無差別級な内容となっている。
 賞金は「大人が趣味でやっていても奥さんに言い訳できるくらいの金額」ということで,優勝賞金50万円,優秀賞10万円,そして奨励賞1万円が用意される。
 奨励賞のみ,ちょっと変わった仕様となっており,公開されてから1万プレイを達成した先着10名に贈られるという。また,2012年初春には,9leapの勝者とOpen leapの勝者との決戦を含むイベント「leap fest」が開催される予定。日時はまだ未定だが,場所は秋葉原となっている。プログラミングを趣味とする人や,かつてBASICでゲームを作っていたというような人には見逃せないニュースといえるだろう。もちろん,さほど難しいものでもないので,これからゲーム制作を始めてみたいという人でも十分参加できる。

画像集#067のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
 
画像集#073のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
 今後,UEIでは,enchant.jsをもっと広くアピールしていく計画を立てている。プログラミングを楽しむ人をどんどん広げ,目標は「一億総プログラマー国家」そして,「60億総プログラマー惑星」の実現だという。
 ということで,海外展開を踏まえた強力なエヴァンジェリストとして清水氏は,新たにUEIに加わったというエリック・マックエヴァー氏を紹介した。日本で映画を制作していた人らしいのだが,「タフでパワフルで演技力があり,英語も得意」な氏を迎え,今後は海外へもenchant.jsを強くアピールしていくという。

画像集#070のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート 画像集#071のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート
画像集#072のサムネイル/プログラミングは最高だ。無差別級ゲームコンテストも発表されたUEI「enchant.js meetup!」レポート

 「我々は超イイ時代にいる」と清水氏は語る。enchant.jsはスクリプトベースのシステムだが,わりと適当なコードを書いても十分に高速に動作させるハードウェアが続々と出てきているため,最適化などに気を遣わず手軽にゲーム制作ができる。そして,それがクロスプラットフォームで動く。プログラミングの楽しさを広めるのに,enchant.jsはかなりよい材料であるのは間違いないだろう。UEIの今後の動向にいっそう注目してみたい。

enchant.js公式サイト

  • この記事のURL:
4Gamer.net最新情報
プラットフォーム別新着記事
総合新着記事
企画記事
スペシャルコンテンツ
注目記事ランキング
集計:03月18日〜03月19日