‘HTML5’ カテゴリーのアーカイブ

ガンガンガガガンで使ったソフト

2017年1月8日 日曜日

絶賛公開中のガンガンガガガンですが(そこ笑わない)



HTML5とJavaScriptで作られています。このあたり、「Flash政治的に抹殺事件」とかHTML5やWebKitに関しては色々とハラワタが煮えくり返る思いがあるのだけれど、まあ金持ってる宗教団体には勝てないというこってす。しくしく。世の中、とりあえず動けばいいやって人が増えたし、これも時代の流れなんでしょうね。

それはともかく、このゲームはGameMakerというツールで作りました。

YoYo Games:GameMaker

1つのコードでブラウザ用からスマートフォンのアプリ、TizenやWindows phoneのような無残に敗れ去ったOS向けまで書き出せます。あれ、そういえばFirefox OSには対応してないね。おっと余計なことを。

もともとHumble Bundleというところで1200円くらいでフルセットを買って積んであったのを年末に触り始め、だいたい使い方がわかったので作ってみたというわけです。ゲームを作るに当たっては、GameMaker:Studio入門という本を参考にさせて頂きました。というかこれがなければ作れなかった。感謝。それとエミリー&シャルロット ラウンジというサイトにもお世話になりました。

この種のソフトはUnityが圧倒的なシェアと情報量を誇っていて、私もそのうち作る予定なんですが(ほんとか?)、簡単な2Dゲームならそこまで大げさなものを使わなくてもいいんじゃない?ということで、もっと簡単なものを探していました。すると結構あるんですよ。Clickteam FusionとかConstruct 2とかDefoldとかGodot Engineとか。

どれも基本的にはスマートフォンからHTML5まで出力可能なんですが、スクリプトなしで作れるものからLuaやPythonが使えたりと様々。内部的にもスマホのネイティブ(というかスクリプトの逐次実行というか)アプリが作れるものから、いわゆるガワネイティブまで。無料なものからそこそこお高いものまで。さすがにJavaScriptで作れとかいうのはなかったかな。知らんけども。

GameMakerはバグが多いです。今はバージョン2が出てて、1.4のバグを直すのかどうなのかって感じだけど、サポートもあまり感心しない(物理演算を使うと動かなくなるなんて、即座に修正すべき案件だぞ)。使い心地も少しクセがあるし。じゃあなんで使ってるかというと、妙な面白さがあるんだなこれ。ああ、こういう事をやりたいから、こんな仕様なんだな的な。泥臭いところが多いけど、そこがまた味わい深い。理想主義とは対極にある設計思想というか。

というわけで、もう少しこのツールを使ってみるつもり。次のミニゲームをお楽しみに。

ところでHTML5でゲーム作ってる人ってどのくらいいるんだろう?ブラウザによって動作も違うし、スマホの処理速度もまちまちで、こんなので商売するのは難しそうだけど、みんなどのへんのフィールドで頑張ってるの?ちとアプリにはヘキエキしていて離れようかと思ってるんだけど、こっちはこっちで砂漠が広がってるのかな?

ガンガンガガガンの元ネタ

2017年1月8日 日曜日

さてさて。お久しぶりです。新作のミニゲームを公開しました。



その名もガンガンガガガン。なんじゃそりゃ。

遊んでもらうとわかるんですが、元ネタはJoustです。

2方向レバーと羽ばたきボタンで空飛ぶダチョウを操作して敵を蹴落とすゲーム。1982年か。歳を取ったもんだなあ。
で、このゲームにはチートがありまして。


敵をマグマから伸びる悪魔の左手にトラップしておくと、中央の足場で時間切れキャラPterodactylを延々と倒すことができるという裏技。知人の弟さんがうまくてねえ。なんだ簡単じゃないかと思って挑戦したらあっという間にゲームオーバー。これがまた超難しい。

理由はダチョウの操作にありまして。普通のキャラはレバーを離すと止まるもんですが、こいつは慣性で動き続ける。止まるには反対側へレバーを倒さないといけない(しかもスリップする)。さらにPterodactylを倒すとダチョウの向きが反転する上に少しだけ足場がずれる。ここポイント、試験に出ます。
なので練習してたらバグの修正されたバージョンが出回り始め、そしてゲーセンから姿を消しました。嗚呼。

そんなしょっぱい青春時代を思い出して作ったこのゲーム。思う存分ガンガンガガガンできます。タダで。うおおお。完全に自分用だ。旧ROMを搭載した実機で遊ぶときもこれで安心だね。そんなもんどこにもねーよ!

HTML5ゲームEaselJS編そして真の敵

2012年12月31日 月曜日

画像の表示にはEaselJSというライブラリを使用しました。こいつはいい。完成度が高いし使いやすい。まあ、JavaScriptでこういうライブラリを作るってのは、マッチ棒で五重塔を作るような曲芸のような気もするし、そのパワーを他のプロダクトに向けたら世界が変わったんじゃないかと(以下略

EaselJSについては、今更私ゴトキが言及するまでもないんですが、いろいろと引っかかったところもあったので参考までに。

(さらに…)

HTML5ゲームbox2dweb憂鬱編

2012年12月31日 月曜日

box2dというのは、いわゆる二次元の物理演算ライブラリです。サイコロを転がすようなのは3次元の物理演算。二次元というのは、まさに新幹線ゲームの10円玉のような、奥行きがない世界のコト。

もともとActionScriptで使い慣れていたbox2dなので、まあ多少の変更ならなんとかなると思っていたら、なかなか世の中甘くはないですな。
とりあえず、以下のbox2dwebのページにアクセスしてみてください。デモが見られます。

http://code.google.com/p/box2dweb/


簡単に説明しますと、外枠に緑色の部分がありますね。これが動かない壁。そこに円とか長方形とかが落下して跳ねる、それだけのデモです。

box2dweb1
この画像のような表示になりましたか?それは結構!しかし…

(さらに…)

HTML5とJavaScriptでゲームを作ったよ(表)

2012年12月29日 土曜日

 

またまた新幹線ゲームを作りました。今度はHTML5とJavaScriptです。

遊んでみたいかたはこちらから

http://www.dagage.com/iphone/jsgames/shinkansenjs/shinkansenjs.html

 

また、動作に関する情報はこちらから。

http://www.dagage.com/news/archives/159

 

Flashからの移植というか最初から作りなおした感じですね。そこでせっかくですから制作過程を残しておくことにしました。興味のある方はお読みください。とりあえず、ある程度はプログラミングの知識があるものとして話を進めます。知らない人、ごめんなさい。

HTML5版では以下のライブラリを使用しました。作者に感謝。

box2dweb
http://code.google.com/p/box2dweb/
CreateJSからEaselJS
http://www.createjs.com/#!/CreateJS

box2dwebは、お馴染み二次元物理演算ライブラリBox2dのJavaScript版です。CreateJSはFlashっぽい機能を実現したライブラリ群で、今回はその中からEaselJSというスプライト処理用のライブラリを使用しました。

また、以下のアプリケーションも使用しました。

Adobe Flash Professional CS6
http://www.adobe.com/jp/products/flash.html

Visual Web Developer 2010 Express
http://blogs.msdn.com/b/osamum/archive/2011/02/18/visual-web-developer-2010-express.aspx
(さらに…)