2014年4月
1 2 3 4

素人が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の情報を頼りに動かせるまで来れたので、他の方だともっと上手くできるんじゃないかと思われる。
最後に汚いソースコードを晒しとくよ。

そこいらのスーパーで買った鰹のタタキ

このエントリーをはてなブックマークに追加
2014/04/29 11:04 am
Blog Category / 日記
Tags /
 

tataki
PENTAX *istDL2 + SMC Pentax-A 50mm F1.7 + 食卓飯撮影システム
そこら辺のスーパーで買った鰹のタタキが旨かったので写真を撮ってみた。
生臭さ皆無。水揚げ仕立て、炙りたての鰹が家から5分の量販店で安く買える。
こと食に関しては田舎でよかったなと思える。

3Dプリンタ製照英ヘッドをサフレス塗装してたら、妙に艶かしくなってきた。

このエントリーをはてなブックマークに追加
2014/04/24 1:30 pm
Blog Category / 制作ログ
 

写真(1)
未知の塗装、サフレスクリア塗装。
表面処理を終えた照英ヘッドは塗装工程に進んだ。肌の透過を狙いクリア塗料を用いたサフレフ塗装にチャレンジしたものの、エアブラシ塗装スキルの低さ、知識の無さが相まって、5回もやり直しする羽目に。リセットの度に様々な混色を試し、ようやく合格点ギリギリの仕上がりに持っていけた所で休日が終了。せっかくの晴天、せっかくの休日だというのに、僕は一体何をやっているんだ。
sepaint
クリア塗料だけの混色では今のところ、これがベストと判断。
シャドウ部へ先にクリアレッドをエアブラシで吹き付けるのだが、何故が艶かしさが出てきて軽く混乱した。これはあれだ、美少女系フィギュアの質感そのものじゃないか。そこはかとなく発せられるエロス、リビドー。塗装、マジ奥深い。照英、マジセクシー。ネットを巡っていて初めて知ったのだが、失敗して塗料は剥離させる際はどこの家庭にもある「マジックリン」が便利。一瞬で塗料を剥いでくれる。※水性アクリル塗料に限る
写真(3)
こんにちは、濡れ照英です。
仕上がりは少々彩度が高いと思うが、隠蔽力の高いガッシュでの塗装と比べ、血色の良さが際立った。全体の光沢は、最終的につや消しのトップコートを吹き付ければ消える。
写真(4)
もうちょっと顔にシャドウを吹き付けてもいいかもしれない。
後はファンデーション(タミヤウェザリングマスター)で調整するか、更に踏み込んで肌のテクスチャを塗装で再現するか…。髪の毛はアクリルガッシュでの筆塗りを予定している。

3Dプリンタ製照英、表面処理が完了。

このエントリーをはてなブックマークに追加
2014/04/23 9:51 am
Blog Category / 制作ログ
 

IMGP0107s
表面処理完了
少し間が開いたが、3Dプリンタでの造形を終えていた照英の表面処理を終えた。積層跡が若干残っているが、あまりに滑らかにしてしまうと二次元アニメ系のフィギュアのようになりかねない。強引だが、肌のテクスチャとして受け止める。
IMGP0110
表面処理の協力なアイテム
表面の研磨用にRYOBI製のホビーリューターを購入。ホームセンターで見かけるプロクソンのリューターは連続稼働時間が短く、パワーも弱いとの評判なので避けた。先端の研磨工具はスジボリ堂のヤスリボール。凹凸に追従する為、ディティールを崩さずに楽に表面処理を行う事が可能だ。
今回改めて感じたが、こういった電動工具は室内で使うものでは無い。試しにリューターを室内で使用すると、粉塵が盛大に舞う始末。これは駄目だという事で、夜ベランダでギュリギュリと研磨作業に勤しんでいた。ちなみに自宅の前面左右に人家は無いという環境なので、リューター程度の音は問題無い。
IMGP0109
今回揃えた塗料その他
以前制作したスカルピー製照英では塗装にアクリルガッシュを用いていたが、今回はクリアー塗料をメインにサフレス塗装に挑んでみたい。乳白色のフィラメントで印刷された3Dプリンタ照英はいい具合に光が透過しており、この特性を生かして塗装すれば良い結果が得られるのでは無いかと考えた。それに従ってサフレフ塗装に関するWEBのコンテンツを漁っていたが、出てくるものは大半が美少女系フィギュアのサフレフ塗装Tips。違うそうじゃない。僕が望んでいるのは汗と涙が迸る雄なんだ。
3Dプリンタ、リューター、各種アイテムの総額が8万を超えて軽く罪悪感が生まれてきた。。

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