初心者向け・学習コストの低いゲーム制作環境6選

このエントリーをはてなブックマークに追加
2014/10/17 9:59 am
Blog Category / 紹介
 

gsk1
Unityでピンボールゲーム、及びに簡単なレトロなゲームを制作している。ゲームアンドウォッチを意識したレトロ風ゲームはほとんどの処理が完成しており、現在はゲームバランスを繰り返しも調整している段階。
最近は無料で簡単にゲームを作れる環境が整っており、僕のような低スキルの人間でも軽い意識でチャレンジできる事に「なんて優しい世界なんだろう…」と感動しきりだ。解説はWEB上に、書籍だってAmazonで簡単に手に入る。こんなに道具が揃っているなら、みんな作ればいいんだ。そこで、そんな優しさにあふれるこの世界に存在する素敵なツール、フレームワークの一部を簡単に紹介したい。ちなみにワイもほぼ初心者や。
※敷居が低く、日本語の解説が豊富な物を中心に取り上げた
プログラム必要無し・本格的なゲームが作れるMMF2.5
gsk2
プログラムの知識が無くとも、ツール上で本格的なゲームの制作が可能。Clickteamというメーカーに聞き覚えのある人も多いのではないだろうか。1990年代、「マルチメディア」という言葉が一世を風靡した頃にオーサリングツールとしてメジャーな存在だった「Klik&Play」、その後継ソフト「Click&Create」の流れを組む歴史あるソフトだ。僕は当時兄弟で馬鹿みたいなゲームを作り(おならでジャンプする距離を競うゲーム)、狭い狭い内輪だけで楽しんでいた。
フランス製だが代理店によりローカライズされており、日本語パッケージ版・ダウンロード版がそれぞれ販売されている。ツール上にはストーリーボードエディタ、フレームエディタ、イベントエディタ、ピクチャ・アニメーションエディタなど、各要素に応じたツールがあり、絵、音楽、効果音などはサンプルファイルを利用すればこのソフトだけでゲーム制作が完結する仕組みになっている。
制作できるゲームはアクション、パズル、シューティングなどジャンルを問わず、2Dゲームに限れば工夫次第で可能性はいくらでも広がる。プログラムの知識が全く必要無く、間口は非常に広いものの、突き詰めてくるとツールの制約に応じた独自のテクニックが必要になってくると思われる。

■関連リンク

プログラム無しでも、有りでも作れるGameMaker Studio
gsk3
■GameMaker Studio ※無料版有り / 英語のみ
元々はMark Overmarsが大学の講義向けに制作したグラフィックツールがルーツ。現在はYOYO GAMESにより販売されている。以前日本でも一部で話題になり、僕も時々このGameMakerで簡単なゲームを作って遊んでいた。現在日本においてはメジャーとは言えない存在だが、インターフェイス、制作プロセスはシンプルで、実際に触れてもらうとこのツールの完成度の高さが理解してもらえると思う。
ツール内での操作は殆どドラッグ&ドロップで済んでしまう。ゲームオブジェクトを作り、イベントを発行して動作を登録するのだが、イベント発生の条件には衝突判定、キー・マウス操作など諸条件がアイコンで表現されており、これらをクリックすればよい。簡易的なグラフィックエディタ、マップエディタも備わっている。
続きを読む

素人がenchant.js + box2Dで作るピンボールゲーム

このエントリーをはてなブックマークに追加
2014/04/29 9:42 pm
Blog Category / ゲーム制作ログ
 

pinball
社畜犬はワイのオリジナルキャラやで
Z,C:フリッパー / カーソル↓で玉を弾く / ←↑→で玉を強制移動
※現在スマホのタッチ操作には非対応 / Chrome推奨
少し前からJavascriptゲームフレームワーク「enchant.js」でピンボールゲームを作っている。テーマは会社の犬、「社畜犬」を用いた社畜による社畜の為のピンボール、ボロアパートから出勤し、ブラック企業内で弾かれながら何とか生き延びるんだ。今年に入ってからJavascriptとenchant.jsを学びながら少しづつ形にしてきたが、最近は3Dプリンタにうつつを抜かしている為制作が停滞している。そろそろ再開させたい。
■enchant.js : http://enchantjs.com/ja/
■PhySprite.enchant.js : かっしぃのメモ帳
ピンボールの挙動には物理エンジン「box2D」をenchant.js向けにラップしたプラグインを用いた。簡単なコードで複雑な動きと当たり判定を再現でき、正にピンボールにうってつけのプラグインと言えるが、その動作には癖も多く、数々のバグや設定に悩まされる事に。そもそも僕のプログラミング言語スキルはゼロに等しく、N88-BASICやActionScriptを少しかじったくらいのもの。なんとなく概念は理解できるが、実践方法が分からん。したがって、数々の要素は学習と平行しながら実装するという状態、その進行スピードは牛歩並みなんだ。
ステージデータは物理オブジェクトである矩形を組み合わせた。多角形も作ることができるが、その場合当たり判定がおかしな事になってしまう為、矩形を組み合わせる方法しか思い浮かばなかった。エディタが無いので、配置座標は全て手入力。非常に効率が悪い。
function stage_data(){
wall = []; // 配列定義// 壁0 右端
wall[0] = new PhyBoxSprite(16, 448, STATIC_SPRITE, 1.0, 0, 0.0, false);
wall[0].position = { x: 320 – 8,y: 448 / 2};// 壁1 左端
wall[1] = new PhyBoxSprite(16, 480, STATIC_SPRITE, 1.0, friction, 0.0, false);
wall[1].position = {x: 8,y: 220};// 壁2
wall[2] = new PhyBoxSprite(16, 100, STATIC_SPRITE, 1.0, 0, 0.0, false);
wall[2].angle = -20; wall[2].position = {x: 320 – 8,y: 60 };// 壁3
wall[3] = new PhyBoxSprite(16, 100, STATIC_SPRITE, 1.0, 0, 0.0, false);
wall[3].angle = -40; wall[3].position = {x: 320 – 30,y: 20};
手動で確認しながら延々と配置していく苦行
当たり判定用の矩形はaddChildしなければ判定を保ったまま表示されないので、透過PNGで意匠を与えた。表示の優先順位はGroupで実装。古いバージョンのenchant.jsでは裏技的にCSSのz-Indexで表示順序をコントロールできたようだが、現在のバージョンでは通用しなくなっている。
var layer_main = new Group();
var layer_stage = new Group();
var layer_stage_top = new Group();
var layer_stage_top_middle = new Group();
var layer_stage_top_high = new Group();
var layer_stage_shadow = new Group();
var layer_stage_background = new Group();
コードの冒頭でグループを宣言。暫定的に7レイヤー分。
var stage_top = new Sprite(320,448);
stage_top.image = game.assets[‘stage_top.png’];
layer_stage_top.addChild(stage_top);
//stage_top.opacity = 0.3;
var stage_shadow = new Sprite(320,448);
stage_shadow.image = game.assets[‘stage_shadow.png’];
layer_stage_shadow.addChild(stage_shadow);
var stage_background = new Sprite(320,448);
stage_background.image = game.assets[‘stage_background.png’];
layer_stage_background.addChild(stage_background);//テンプレートイメージ(デバッグ用)
var temp = new Sprite(320,448);
temp.image = game.assets[‘temp.jpg’];
temp.opacity = 0.3;
//layer_stage_top.addChild(temp);layer_stage_top.addChild(db1); // デバッグ用変数表示配置
先程宣言したグループに画像をaddChild。背景やら影やらデバッグ用やら
//グループ配置
scene_main.addChild(layer_stage_background);
scene_main.addChild(layer_main);
scene_main.addChild(layer_stage);
scene_main.addChild(layer_stage_shadow);
scene_main.addChild(layer_stage_top);
scene_main.addChild(layer_stage_top_middle);
scene_main.addChild(layer_stage_top_high);
で、グループ自体をシーンにaddChild。記述の順に従って表示される。画面の上部のループレーンに進入した際は、ボールの配置Groupを入れ替えている
根源となる動作はほぼ完成したとはいえ、各種ギミック、アニメーション、スコア表示など、課題は山積みでまだまだ理解していない事が多いが、あまり頭の出来がよろしくない僕がWEBの情報を頼りに動かせるまで来れたので、他の方だともっと上手くできるんじゃないかと思われる。
最後に汚いソースコードを晒しとくよ。

  • 最近の投稿
  • 最近の特集
  • 人気の記事
  • アーカイブ
  • カテゴリー
  • タグクラウド