Skip to content

enchant.js用マップエディタenchantMapEditorが大幅にパワーアップ!

ehcnant.jsのユーザさんにはお待ちかね!
MOONGIFTでも紹介された、enchantMapEditorが大幅にバージョンアップしたぞ!

待望の「塗りつぶし機能」を搭載。これで背景をひとつひとつ手で埋めるなんてことしなくてもマップが描けるようになった。これは嬉しい。塗りつぶし機能を使うには「Pen」と描かれた部分をタップすると「fill」にかわる。あとは塗りつぶしたい場所をクリックすればOKだ。

そして今回の機能の目玉はなんといっても、「海岸線の自動補完」機能。

 

ごく単純なマップチップを自動的に認識して、勝手につなぎ目を美味い具合につなぐ機能で、これはプロ用のマップエディタには必須の機能。

しかし今回、高橋諒くん(19歳)はそれをナ、ナントすべてJavaScriptで実現してしまったのだ!

今日はそんな高橋くんに開発で苦労したポイントなどをインタビューしてみたぞ!

 

-やあ今回はおつかれさま。苦労したポイントってどんなところ?

 

高橋君 enchant.jsが使いやすいのもあって、編集画面側の処理は作り易かったですが、JavaScriptを使用した経験がなかったので、webページの要素を操作するような部分に苦労しましたね。

 

-え、JavaScriptって使ったことなかったの?それ自体驚きだけどどんなところに躓いた?

 

高橋 塗りつぶし機能の実装ですね。最初の実装では処理速度が遅く、すぐにコールスタックがオーバーフローするような状態で、苦労しました。

 

-塗りつぶしのアルゴリズムってけっこう古典的だけど最近はあんまりそういう基本的なところをカバーした参考書も少ないよね。今回、海岸線と地面や、草原と砂地の境界を自動補完する機能がついたのが一番の特徴だと思うんだけど、そこはどんな工夫をしてるの?

 

高橋 海岸線の自動生成機能を実装するのに苦労したことはいくつかありますが、この機能自体が、画像を合成して新しいマップチップを作ったり、生成したマップチップにそれぞれ番号付けをしたり、enchant.jsのマップ機能自体に食い込む部分が多く、マップ機能の拡張として作ることから初めなければいけなかったのが大変でした。

 

-なるほどね。確かにもとのenchant.jsはごく普通のマップの表示に特化しているから、マップ機能そのものを強化するにはそこに手を加えざるを得ないというわけだね。

高橋 また、1つのチップの周囲に同じチップがあるかどうかで、512通りのパターンがあるので、違うパターンで同じチップを使う部分をまとめるアルゴリズムをつくるのに苦労しました。

 

-そういうのは一切、参考書に載ってない話題だから、自分で見つけ出さなきゃならないわけだ。なるほどね。

 

そして前回のα版ではバグっていたコード生成機能も今回はちゃんと動作する。
別ウィンドウが開かれるのでここからコピー&ペーストを活用すればOKだ。

今後の展開としては、ゲームの開発者以外でもマップを自由に作ってアップロードする機能をつけたり、もっとマップチップの種類を増やしたり、いろいろと構想が膨らんでいるぞ。

要望があったらぜひ@9leapにむけてつぶやいてくれ!

enchantMapEditorのダウンロードは以下から

github: enchantMapEditor

もちろん無料ダヨ!

このエントリーをはてなブックマークに追加
はてなブックマーク - enchant.js用マップエディタenchantMapEditorが大幅にパワーアップ!
Post to Google Buzz
Share on GREE

Related posts:

  1. [enchant.js]shi3z式ゲームプログラミング #7 タイムアタックは神!
  2. shi3z式ゲームプログラミング入門 #8 enchant.jsでプチ物理シミュレースゲームを作ってみた
  3. 9leap Camp@Tokyoレポート:4時間でスマートフォン対応のHTML5ゲームをゼロから創ってみる
  4. 第1回 Processing.js で初めてのゲームプログラミング
  5. shi3z式ゲームプログラミング入門 #9 同じソースから全く別のゲームを作り出す

Facebook comments:

Post a Comment

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