いうわけで無料で使えるお手軽サクサクボクセルアート作成ツール「MagicaVoxel」について紹介する。以前の記事でも簡単に触れたが、@ephtracyさんという方が開発されている。作ったボクセルアートを美麗にレンダリングすることが出来るレンダリング後はPNG画像として出力可能(背景の透過も可)独自形式(voxファイル)で保存objなどの一般的なフォーマットで3Dモデルをエクスポート出来る動作が軽い無料WindowsでもMacでも使えるこんな感じ。絵心のない俺のような人間でもそれなりのものを作ることができるので、ゲーム素材等を作るのに重宝している。独特のUIを持っているため、最初はとっつきにくいかもしれない。そんなわけで、これから何回かに分けてMagicaVoxelの使い方を説明したい。読み込みMagicaVoxelをインストールすると、はじめからいくつかのサンプルデータが入ってくる。右側のModelタブ内に表示されているのが、サンプルやユーザーが作ったデータだ。データを読み込む方法は簡単で、Modelタブ内のデータ名をクリックするだけでいい。読み込んだデータを複製して編集を始めたい時は、左上のcopyボタンを押す。中央上にあるファイル名のボックスが空欄になるので、そこに新しいファイル名を入力する。新規作成データを新規に作りたい時はnewボタンを押す。デフォルトの状態である立方体が画面に現れる。ファイル名を入力することで新たなファイルが作られる。編集中のデータを保存(上書き保存)したい時はsaveボタンを押す。不要なファイルを削除する時は左下のdeleteボタンを押す。十分気をつけてほしい。データはどこに保存されているの?最後に、MagicaVoxelのファイルはどこに保存されているかについて。MagicaVoxelのデータファイルはすべてインストールフォルダの中のvoxフォルダに保存される。他所から持ってきたファイルを読み込みたい場合などは、ここに置くことでMagicaVoxelで開くことができるようになる。2015-10-14phina.jsでスマホSTGのタッチ操作を実装しようタッチ操作でSTG!!シューターたる者、いつでもどこでもSTGをプレイしたいものだ。VERSION」などをインストールしていることだろう。スマートフォンにおけるSTGの操作方法にはいくつかのパターンがあるようだ。端末を傾けた方向に自機が移動するタッチした場所と自機の位置が完全に同期するバーチャルキーパッドで自機を操作するタッチした場所に向かって自機が移動するスワイプした方向に自機が移動する個人的に「これはねーだろ」と思った順に並べてみた。「1.端末を傾けた方向に自機が移動する」や「3.バーチャルキーパッドで自機を操作する」なんかはiPhoneが流行り始めた時期にはよく見かけた気がする。当然だがすごく操作しづらい。「2.タッチした場所と自機の位置が完全に同期する」は初心者が作ったSTGでよく採用されている気がする。指で完全に自機が隠れてしまい、弾避けどころではない。「4.タッチした場所に向かって自機が移動する」はタブレット端末の場合は意外と良い場合もあったりするが、片手で操作したい場合はやはりつらい。いうわけで「5.スワイプした方向に自機が移動する」である。画面のどこでも良いから指をすべらせると、指の移動方向に合わせて自機が移動する方法だ。phina.jsやtmlib.jsで実装しよう!!さて、こいつをphina.js(またはtmlib.js)で実装してみる。これは驚くほどカンタンだ。適当なオブジェクトを表示しよう。480).addChildTo(app.currentScene);});tmlib.jsの場合はこう。480).addChildTo(app.currentScene);});で、自機にenterframeイベントのリスナーを登録する。リスナーの内容はこんな感じ。this.position.add(pointing.deltaPosition.mul(sensitivity));};phina.jsではオブジェクトの位置を2次元ベクトルとして保持している。くわえて、そのフレームでのポインターの移動量を同じく2次元ベクトルとして取得することが出来る。処理としては単純に加算するだけでOKなのだ。例では感度(sensitivity)として2.0という値を設定している。指の移動量をそのまま自機の移動量としてしまってもいいのだが、それだとたとえば自機を画面の左端から右端へ移動させたい場合に不都合が起こる。(高い確率で指が端末の端まで到達してしまって、一度離してタッチしなおさなければならない!!)また、指というのは案外精密に動く。指の動作に対し自機が多少大袈裟に動いたとしても問題ない場合が多いのだ。APIに対応した機能が備わっているので、作ったブラウザゲームをゲームパッドで遊ぶことが出来る。入力情報を取得してゲームに反映させる0.準備とりあえず四角形を表示する。今回のサンプルではこの四角をゲームパッドで動かしてみよう。メソッドがGamepadオブジェクトを返す。app.gamepadManager.get();};3.入力情報を取得してゲームに反映させる取得したGamepadオブジェクトからは、入力情報がphina.input.Keyboardと同じように取り出すことが出来る。gamepad.getStickDirection();今回はゲームオブジェクトをアナログスティックで操作することにしよう。アナログスティックはかなりデリケートなので、「これ以上の入力があれば有効とする」という閾値を決めておく必要がある。これはphina.geom.Vector2のlengthメソッドを使えば簡単に実現することが出来る。rectangle.position.add(stickVector.mul(10));}まとめまあこんな感じで、phina.jsではゲームパッドが簡単に使えるわけだ。APIに対応したゲームパッドとしては、Xbox360コントローラーがオススメである。単品でも購入できるが、Xbox360を買えばもれなく付いてくるので持ってない人は是非買いましょう。自機や敵やアイテムが視認しづらいめう!PhinaShooterでは全体をドット調で表現していこうと思っている。そのためにCanvasを480x320という小さなサイズで描いた上で拡大するという方法をとっている。画面が粗くなって各スプライトの視認性が悪くなってしまった。そこで上の動画のようにスプライトの輪郭を点滅させて強調表示することにした。画像アセットのロード後に輪郭のみ抽出した画像を作成するAssetManagerに作成した画像を登録するスプライトに輪郭のみの画像を重ねて表示するこんな感じでやってみた。輪郭抽出の方法だが、元画像からピクセルデータを取り出し、アルファ値が0より大きく上下左右にアルファ値が0のピクセルがある...という条件を満たすピクセルだけを白く塗りつぶした新しい画像を作成する。}}こうして作った画像をAssetManagerに登録する。dst);アセット名はもとの名前に後ろに”Outline”をつけてみた。こいつを利用するスプライトだが、通常のSpriteクラスを拡張して作る。}});輪郭スプライトを元スプライトの子要素として追加しておく。updateメソッド内でframeIndexが親スプライトと同期するようにする。輪郭スプライトのアルファ値は外部から設定できるようにしておき、MainSceneなどのupdateで更新する。オブジェクトの種類に応じて色を変えるめう!これで視認性が良くなったと思うので、さらに自機は青、アイテムは緑、敵は赤といった具合にオブジェクトの種類に応じて輪郭色を変えてみた。これで粗い画面でも最低限の識別ができるようになったと思う。背景はgl-matrix.jsを使って3D表示してみた。WebGLは使わず普通のCanvasAPIで描いてる。今回は全体的にドット調で行こうと思っているので、フォントもレトロゲームっぽいものを選択した。Shooter製作開始rougeを作る手がどうにも止まってしまって進まないので、某所からの圧力に負けて違うのを作り始めた。Shooterになる予定。https://github.com/daishihmr/phina-shooter今回はphina.jsをまっとうに使って普通に実装し、読みやすいソースにしていきたい。phina.js利用者が参考にできるようにね。ゲームのフローや得点システムあたりを考え中。Road」とか映画「ピクセル」とかあるしね。さんが開発された、ボクセルアート作成ツールです。シンプルな操作系とサクサクした動作の軽さが魅力!vox.jsというわけで、MagicaVoxelで作ったデータをJSで読み込むライブラリを作りました。vox.js使い方は簡単。読み込んだボクセルデータをTHREE.Meshに変換する機能も持っています。THREE.Sceneに追加するなどして使ってくださいscene.add(mesh);できたー!まとめMagicaVoxelは本当に簡単に使えるツールです。絵心というものとは無縁の人生を送ってきた僕でもこれくらいの物はチャチャッと作ることが出来ました。みなさんも是非やってみてください。今作ってるゲームについて。自作STGとしては7作目となる。やること(やりたいこと)。内容は普通の弾幕STGWebGLを使って弾をたくさん出す2Dスプライトではなく3Dモデルでゲーム画面を作るthree.js等のWebGLライブラリは使わないphina.jsを使う。同時にphina.jsに機能追加の貢献をする弾銃フィーバロン方式。小型機編隊はすべて早回しを起こすランクを維持する限り敵弾の速度が上昇し続ける目下の課題。タイトルが未定ビジュアルイメージが決まらない。普通にモデリング?配布形式が未定。当初はElectronでデスクトップアプリ化するつもりだった。APIに対応してないように見えるため迷走中。ない砲口から敵弾が発射される場合でも自機移動平面上を移動していく。(かつ、きちんと砲口から出ているように見える)任意の回転軸を持つ砲塔が自機を追う2015-09-29DOGAを使うことにするかもDOGA-L3で作った多関節物体をポーズデータ込みでgl.enchant.jsのSprite3Dに変換するツールを以前作ったのだが、そいつを今作ってるゲームに使おうと思い始めた。ツールが吐き出すJSONはそのままに、jsでメッシュ化するだけで出来るはず。NextJavaScriptゲーム作りマン+MagicaVoxelでキャラ作るマン。phina.js好き。シューティングゲーム好き。能登麻美子と結婚したい。