BraveWorkz

ラインスタンプ発売！

2015-05-23T23:06:00.002+09:00

時代の流れにのって...

LINEスタンプを販売開始しました！

われらがまーさんもついにラインデビューです！
今のところ3種類作成していますのでもしよかったら使ってください！

http://line.me/S/sticker/1074980

http://line.me/S/sticker/1095814

http://line.me/S/sticker/1103954

くせのあるスタンプですがよろしくお願いします。
ゲームもそろそろ作らないと...

enchant.hxを使ったHTML5ゲームアプリ開発のススメ

2013-11-17T15:39:00.001+09:00

最近はめっきり涼しくなりましたね。
そろそろ年の瀬が見えてきた今日この頃、皆様いかがお過ごしでしょうか？
pon_zuです。

更新サボってスミマセン。

さて、今回は最近使っているenchant.js+Haxeを使ったゲーム開発のお話をしたいと思います。

enchant.js+Haxeでどうやってゲーム作るの？

この辺りはgaya_K君が記事にされているので、さらっとまとめます。
最近のBrave Workzでは、以下の組み合わせでゲームを作成しています。

ゲーム開発のフレームワークとしてenchant.jsを採用しつつ、
開発言語にHaxeを使うことで、javascript特有の癖を気にせず開発することができます。
Haxeは最近流行りのaltJSの一つですが、特にJavaやActionScriptに馴染みのある人に馴染みやすい構文だと思います。
「Haxeって何？という方はこちらのスライドをご覧ください。

FlashDevelopは優秀なコード補完の機能があり、WindowsでHaxe開発する際は定番のエディタです。
プラグインなしでHaxeに対応しており、日本語にも対応しています。

以前、gaya_K君がこちらの記事で紹介していたenchant.hx を使用します。
gaya_K君の頑張りにより、以前よりもバージョンアップされています！

基本的なゲームループについて

実はenchant.hxを使ったゲーム開発まだまだ模索段階です。
将来的には独自にHaxeクラスを追加して行きたいところですが……。
とはいえ、現段階でも十分実用可能なライブラリになっています。

今回はenchant.hxを利用したゲームループの基本構文をご紹介します。

package ;

import js.Lib;
import enchant.*;
import enchant.nineleap.*;
import enchantHaxe.*;
import enchantHaxe.nineleap.*;
using enchantHaxe.HxConverter;

// アンチエイリアス対策
import SpriteEx;

/**
 * enchant.hxサンプル
 * @author pon_zu
 */

class Main
{
    static function main()
    {
        // JavaScript の enchant(); に相当
        EnchantHx.exportAll();

        var game = new enchant.nineleap.Core(320,320).toNineleapCoreHx();
        game.fps = 15;
        game.preload(["chara1.png", "icon0.png"]);

        game.onload = function ():Void
        {
            // スタート画面
            var splashScene = new SplashScene().toSplashSceneHx();
            game.pushScene(splashScene);

            // クマのスプライトを生成
            var sprite = new SpriteEx(32, 32).toSpriteHx();
            sprite.image = game.assets.get("chara1.png");
            sprite.x = 160;
            sprite.y = 160;

            // クマのアニメーションを設定
            sprite.setFrames([1, 0, 2, 0]);

            // クマにtweenアニメーションを追加できたりもします
            sprite.tl.fadeOut(10).fadeIn(10).loop();

            // メインシーンを作成
            var scene = new Scene().toSceneHx();
            scene.backgroundColor = "#eeeeeeee";

            // メインシーンにスプライトを配置
            scene.addChild(sprite);

            // メインシーンにイベントを追加
            scene.addEventListener(
                EventType.TOUCH_START,
                function (e):Void
                {
                    sprite.x = e.x;
                    sprite.y = e.y;
                }
            );

            // メインシーンを最前面に移動
            game.pushScene(scene);
        }

        // ゲーム開始
        game.start();
    }
}

enchant.js使ったことある方ならば、コメント読まずともクラスやメソッドの名前でなんとなく何やってるか分かりますね。
enchant.hxはgaya_K君により、enchant.jsユーザに取っ付きやすいライブラリになっています。
それでも、少し見慣れない構文があります。

// スタート画面
            var splashScene = new SplashScene().toSplashSceneHx();

何でしょう？SplashSceneを生成した後にtoSplashSceneHx()を実行したものをsplashSceneに突っ込んでいます。
が、実はSplashSceneクラスはHaxeのexternクラスであり、toSplashSceneHxメソッドは実装されていません。

「externクラスって何？」って方は、こちらのページを読んでみてください。
（簡単に言うと、Haxeが外部ライブラリに対して静的型付けを行うために必要になるクラスですね！）

じゃあ、toSplashSceneHxメソッドはどこに？
gaya_K君はどんな魔法を使ったの！？
タネはコード先頭にありました。

import js.Lib;
import enchant.*;
import enchant.nineleap.*;
import enchantHaxe.*;
import enchantHaxe.nineleap.*;
using enchantHaxe.HxConverter;

各ライブラリを使用するためのimport文に続いて、謎のusing文があります。
実はHaxeのusing文を使うことで、enchantHaxe.HxConverterクラスのtoSplashSceneHx()メソッドを
SplashSceneクラスのメソッドのように記述できるんですね！Haxeすごい！

「Haxeのusing文もっと知りたい！」って方はこちらのページを読んでみてください。

もう一点、import文の中に変な記述がありますね。

// アンチエイリアス対策
import SpriteEx;

クマのスプライト生成でSpriteExクラスを使用してます。

// クマのスプライトを生成
            var sprite = new SpriteEx(32, 32).toSpriteHx();

SpriteExクラスは、Spriteクラスを拡張したクラスで、中身はこれだけ。

package ;

import enchant.*;
import js.Browser.document;
import js.html.Element;

/**
 * Spriteの拡張クラス
 *　とりあえずアンチエイリアス対策を実装
 *
 * @author pon_zu
 */
class SpriteEx extends Sprite{

    private var _element:Element;

    /**
     * コンストラクタ
     */
    public function new(width:Int, height:Int) {
        super(width, height);
        this._element = document.createElement("div");
    }

}

Spriteクラスにdiv要素を追加してます。
enchant.jsを使用されている人ならわかってくれると思うんですが、canvasでスプライトを生成して、拡大縮小やフェードイン・フェードアウトを行うと、Google Chromeで表示した時ドット絵にアンチエイリアスがかかるんですよね。
その対策として、スプライトにDOM要素を追加してenchant.jsのDOMのLayerに表示してもらっています。
独自に生み出した苦肉の策なので、他に良い解決策を知ってる方がいましたら、教えてください！

今日のまとめ

Haxeはコンパイルの環境を作る必要があるので、
enchant.hxを初めて使う場合は、最初はenchant.hx付属のサンプルプロジェクトをいじってみることをおすすめします。

今回の記事はenchant.hxの触りだけのご説明でしたが、
また別の機会に開発者であるgaya_K君が細かな解説をしてくれると思います。

Haxeすごい！enchant.hxすごい！みんな使ってね！

コラボレーション！

2013-09-23T14:29:00.000+09:00

こんにちは、Braveです。

今回はビッグなお知らせです！

「TIGER CLAW」や「Bluest」シリーズで有名なMYKさんとのコラボレーションが実現しました！

なんと現在Googleplayで好評配信中（しかも無料！）のダモポンにまーさんが
出張することになりました！

ほら、左のほうにわれらがま～さんが見えるでしょう？

3Dモデリングでジタバタ動くまーさんもなかなかかわいいですね。

※正確には3Dモデルをもとにドットで打ち直したものです。

　こちらはMYKさんに作成していただきました。

ダモモと一緒

タイトル画面に追加されたまーさんをクリックするとBraveworkzへのブログへ飛べるようようになっています。

そこから来た人は初めましてですね。まだゲームは少ないですがぜひ遊んで行ってくださいね。

そして、まーさんがゲーム本編にも登場するモードもあります！

左に見える肌色がまーさんの後頭部ですよ！

ダモポンは決められた制限時間（1分、3分）のなかでダモモを倒しまくるゲームなのですが、なんとまーさんをたたくと持ち時間がマイナス5秒されてしまいます！

うーん、なんといやらしい！
しかもなかなかのスピードで動き回るので気を抜くと結構な頻度で
まーさんにヒットします。
われらがまーさんながらウザいです（笑）

そんなまーさんが登場するダモポンはこちらからダウンロードできますので

ぜひ遊んでみてください！（Goggle playへ↓）

https://play.google.com/store/apps/details?id=jp.damomo.damomoimpact&hl=ja

BraveworkzでもMYKさんとコラボしたゲームを作っていきたいですね。

しかしダモモとまーさんいったいどちらが強いのか気になりますね…。

・・・格ゲー？

キャラクター紹介0007

2013-09-15T14:41:00.001+09:00

こんにちは、Braveです。
長らくあいだを開けてしまいましたが、
まーさんにひとつ大きなお仕事が舞い込んできましたので
現在そちらの紹介用の記事を作成中です。

それまでのつなぎとしてまずはキャラ紹介です。

No.007　Nox

お空に漂う小さな戦士。目に見えないけどみんなの周りに
たくさんいるよ。かもすぞーとは言わない。

■基本データ

体長：すごく小さい
重量：ふわふわ
好物：科学物質（体に悪そうなやつ）
嫌いなもの：顕微鏡

■説明

Bravewave時代、まーさんでも倒せるような敵が欲しくなったために生み出されました。
ひ弱なまーさんでも倒せるようにと、原子、分子をイメージしています。
決してもやしもんに影響されたわけではありません。
もやしもん、好きですけどね。

Noxとは本来窒素化合物の総称ですが、響きがかっこいいから
という理由で二酸化炭素なども全部コミでNoxです。
ゲームには基本形の灰色：CO2のみが登場していましたが
設定上はその他に倒すとダメージをくらうCO、ダメージが回復するO2や
引火性のH等がいます。

どうもCO2です。

iアプリ時代は一定時間内に一匹でも残すとすべての敵が復活するという
鬼畜仕様だったので難易度を調整してリメイクしたいなとも考えています。

まーさんのお仕事の記事はもうちょっとだけ待ってね。

ヒントはこちら

どこかで見たような髭のキャラクターが・・・

開発環境などなどその5 集合場所編

2013-05-20T23:18:00.001+09:00

どうも gaya_K です。

ブログ当番を pon_zu くんから振られていたのですが、ずっとサボってしまって更新を1ヶ月近くストップさせてしまいました。
すみません。

開発環境などなどシリーズも、ネタ切れが近づいてきたので何を書こうか迷っていたのですが、
私達が普段どこで作業しているかちょっと書いておこうかと思います。

BraveWorkz メンバーは全員が東京周辺に住んでいますが、それなりに離れたところに住んでいるので最適な集合場所を模索しています。
もちろん、メンバー（主に Brave くん）の家で作業をすることもありますが、比較的外で作業することが多いです。

喫茶店

ルノアール

たぶん、一番使用頻度が高いのがルノアールでしょう。
大きな駅ならだいたいありますし、スターバックス等に比べるとメニューが高価なのでお客さんは少なめです。
店内が満席で引き返した、なんてことは今までありませんでした。
店員さんに「コンセントが使える席はありますか？」と聞いて、その席で PC を広げて作業開始です。
無料の公共無線LANはさすがにありませんが、私達はスマホのテザリング等で対応します。
電源は供給できるので、電池切れの心配もないですしね。

ちなみに、私は水出しアイスコーヒーがすきです。

http://www.ginza-renoir.co.jp/renoir/

コワーキングスペース

ノマドなんて言葉が流行っているせいか、都内にいろいろなコワーキングスペースができています。
一般的に電源と無料の無線LANが使用できる場所を提供してくれるお店です。

ターミナル

原宿にあります。割りと有名なお店だと思います。
3回くらい利用したでしょうか。

軽食もありますが、他で食べてから入るのが得策かと。
Mac が数台設置されていたりと設備もしっかりしています。

原宿駅からは竹下通りを通り抜けるのが一番近道なのですが、
この歳で竹下通りを歩くのは少々気が引けますｗ

http://theterminal.jp/index.html

タマリバ

1回だけ行きました。
渋谷駅から離れてやや落ち着いたところにありますが、まず建物の中で迷いますｗ
ドラクエのダンジョンかとおもいましたｗ

入ってみると、飲食のメニューはなく持ち込み OK とのことでした。
カードゲームで遊ぶ人たちがよく集まるみたい（？）です。

ターミナルと比べるとかなりアットホームで親しみやすい感じでした。

http://tamariba.me/

ミッション02：敵機の種類を増やしてみんとす！

2013-04-28T15:34:00.001+09:00

お久しぶりです。pon_zuです。

前回に引き続きenchant.jsを使って「シューティングゲームを育成してみんとす！」をやっていきます。

第2回のテーマは「敵機の種類を増やしてみんとす！」です。

ステップ1：敵機の画像を変えてみんとす！

敵機の種類を増やす前に、まずは簡単に敵機の画像を変えてみましょう。

コードの差分はこれだけ。

/**
* Display enemy image.
* You divide the http://jsrun.it/assets/x/7/A/x/x7AxY.png image into 16x16 lattices,
* and start counting from 0 at the top left, and because the image you want to display is at 3, you set frame to 3.
* 敵機の画像を表示する。
* http://jsrun.it/assets/x/7/A/x/x7AxY.png の画像を 16x16 の格子で区切ると、
* 左上を0番目として数えて、表示したい画像は3番目にあるため、frameには3を指定する。
*/
-        this.frame = 3;
+        this.frame = 4;

ただ、これだと全部の敵の色が変わってしまっています。
今度は緑、赤、青の3色の敵が出現するようにしてみましょう。
こんな感じになります。

コード差分はこんな感じです。
Enemyクラスのコンストラクタの引数に敵機の種類を表す「type」変数を追加しましょう。

@@ -63,7 +63,10 @@ window.onload = function () {
if(rand(1000) < game.frame / 20 * Math.sin(game.frame / 100) + game.frame / 20 + 50) {
var y = rand(320);
var omega = y < 160 ? 0.01 : -0.01;
-                var enemy = new Enemy(320, y, omega);
+                // 敵機の種類をランダムで選択
+                var type = rand(3);
+                // コンストラクタの引数に敵機の種類を追加
+                var enemy = new Enemy(320, y, omega, type);
enemy.key = game.frame;
enemies[game.frame] = enemy;
}

@@ -265,7 +268,7 @@ var Enemy = enchant.Class.create(enchant.Sprite, {
* Player と異なり自律して動くため、そのための処理が追加されている。
* コンストラクタには初期位置 (x, y) のほか、移動方向の角速度 omega を指定する。
*/
-    initialize: function (x, y, omega) {
+    initialize: function (x, y, omega, type) {

敵機の種類によって「frame」の値を設定しておきます。「type」はrand()によって0～2の値が入るので、それぞれ「frame」に3～5の値を設定します。

@@ -276,6 +279,23 @@ var Enemy = enchant.Class.create(enchant.Sprite, {
this.y = y;

/**
+         * 敵機の種類によってパラメータを設定
+         */
+        var frame = 0;
+        switch(type){
+            case 0:
+                frame = 3;
+                break;
+            case 1:
+                frame = 4;
+                break;
+            case 2:
+                frame = 5;
+                break;
+            default:
+        }

ここで「this.frame」に先ほど設定した「frame」を代入します。

@@ -283,7 +303,8 @@ var Enemy = enchant.Class.create(enchant.Sprite, {
* http://jsrun.it/assets/x/7/A/x/x7AxY.png の画像を 16x16 の格子で区切ると、
* 左上を0番目として数えて、表示したい画像は3番目にあるため、frameには3を指定する。
*/
-        this.frame = 4;
+        this.frame = frame;
+

ステップ2：敵機の強さを変えてみんとす！

今度は敵機の強さを変えてみましょう。今回は種類によって体力に差をつけてみます。こんな感じになりました。どうでしょう？赤色や青色の敵は一撃で撃破できなくなっていると思います。コードの差分は以下のとおりです。まずは、敵機の種類によって「hp」の値を設定します。以下の設定の場合、緑の敵機は1回、青の敵機は3回、赤の敵機は5回弾を当てることで撃破出来ます。また、強さに応じて取得できるスコアを変えることにしました。

@@ -282,15 +283,23 @@ var Enemy = enchant.Class.create(enchant.Sprite, {
* 敵機の種類によってパラメータを設定
*/
var frame = 0;
+        var hp = 0;
+        var score = 0;
switch(type){
case 0:
frame = 3;
+                hp = 1;
+                score = 100;
break;
case 1:
frame = 4;
+                hp = 5;
+                score = 300;
break;
case 2:
frame = 5;
+                hp = 3;
+                score = 200;
break;
default:
}

@@ -323,6 +332,12 @@ var Enemy = enchant.Class.create(enchant.Sprite, {
this.moveSpeed = 3;

/**
+         * 体力と撃破時のスコアを設定
+         */
+        this.hp = hp;
+        this.score = score;
+

自機弾クラスであるEnemyShootクラスに敵機に弾が当たった時の処理が書かれています。元々の処理は敵機に弾が当たった場合に敵機の削除と加点が行われていますが、今回はif文を1つ追加して、敵の体力が0より小さくなった時だけ敵機の削除と加点の処理を行うようにしています。また、元々は加点するポイントが100点で固定されていたのを、敵機ごとに設定された「score」の値を使うように変更しています。

@@ -415,9 +430,12 @@ var PlayerShoot = enchant.Class.create(Shoot, {
this.addEventListener('enterframe', function () {
for (var i in enemies) {
if(enemies[i].intersect(this)) {
+                    enemies[i].hp--;
this.remove();
-                    enemies[i].remove();
-                    game.score += 100;
+                    if (enemies[i].hp <= 0) {
+                        game.score += enemies[i].score;
+                        enemies[i].remove();
+                    }

上では体力を変えましたが、同じ要領で移動スピード、軌道、弾の発射間隔なんかも変更できますね。さて、今回はここまでです！次回は何を改造しましょうね？

BitbucketとMSYS Git、tortoisegitでバージョン管理環境の構築

2013-03-31T17:18:00.000+09:00

はじめまして、n4bです。
初めて、ということで少々拙い文章で恐縮ですが、
生暖かい目で見守っていただけると幸いです。

初めてのこのエントリーでは、BWで使っているバージョン管理環境についてです。
参考サイト紹介をメインにメモ書き程度に残します。
ちなみに、環境はWindows 7です。

Bitbucket

Bitbucketは、ウェブベースのホスティングサービスで、ここにGitrepogitoryをおいて管理しています。
これはアカウント登録するだけなので、特に苦労はありません。
GoogleやFB、Twitter、GitHubのアカウントを利用することもできます。
リポジトリの管理も、ほぼここで完了します。

MSYS Git、TortoiseGit

MSYS Gitは、GitをWindows環境で使うためのソフトウェアです。
Cygwinみたいな位置づけです。
MSYS GitにもGUIはありますが、BWではこれよりも使いやすい
TortoiseGitを使っています。
つまり、GUIとしてTortoiseGitを使い、裏ではMSYS Gitが動いています。

インストール手順は、下記サイトを参考にしています。
Windows版git & TortoiseGit のインストール
途中、バージョン違いで変わっているところもあるのでご注意ください。

これを使って、リポジトリのあるBitbucketへアクセスし開発を進めています。

Haxe はじめました

2013-03-20T16:11:00.003+09:00

どうも gaya_K です。

以前のブログで、今年は Haxe か TypeScript を使ってみたいと書きました。
というわけで、最近 ~~冷やし中華~~ Haxe 始めました。

インストール

細かいところまでは書きませんがメモ程度に。

まずは Haxe を公式サイト（http://haxe.org/）からダウンロードしてインストールします。

そして、開発環境として FlashDevelop を公式サイト（http://flashdevelop.jp/メインページ）からダウンロードしてインストールします。

FlashDevelop を起動し、ツール > 環境設定 > HaxeContext > Installed Haxe SDKs と辿って Haxe をインストールしたフォルダを指定すれば完了です。

enchant.js を使う

ただ、 Haxe を使って JacaScript のコードを作るだけなら簡単なのですが、
私たちはゲームに enchant.js という JavaScript のライブラリを使っています。

なので、 enchant.js を Haxe で使えるように橋渡しさせる必要があります。
これがまた地道な作業で骨が折れます。。。

もともと型の制約がゆるい JavaScript に対して型の情報を付加していくので、
元のソースコードと JsDoc を行ったり来たりしてなんとか書き上げました。

コードを書くにあたっては以下のブログ記事＆コードを参考にさせて頂きました。

HaXe触ってみた - mizchi log
http://d.hatena.ne.jp/mizchi/20120902/1346582196
https://github.com/mizchi/haxe-try

作った Haxe のコードは Github にて enchant.hx として公開しています。
https://github.com/gayaK/enchant.hx

とりあえず今は自分たちが使う enchant.js, ui.enchant.js, nineleap.enchant.js だけ対応しました。
まだまだ納得がいっていない部分が多いので、今後いろいろ変わっていくと思います。

enchant.hx を使って書いているコードのスクリーンショットです。

書き終わったコードを見ても伝わらないけど、型推論と入力補完が気持ちいいんですよ！

次回のリリースから Haxe で書いたゲームになる予定ですのでお楽しみに！

キャラクター紹介006

2013-03-09T16:59:00.002+09:00

こんにちは、Braveです。

最近は諸事情で二人に開発をまかせっきりですが
ちょこちょことアイディア出しをしていますよ。

次回作とは別に、もう一個のゲームの企画を思いついたのです。
ただ、このゲームは大量に画像が必要なので開発はひとまずお任せして
モーションの作成に取り掛かろうと思っています。
むしろ開発組より時間がかかるのではとこっそり思ったり…

さあ、気を取り直してキャラクター紹介に参ります。

No.006　ブリンプ君

室内用小型飛行船ロボット。
プロペラがないため手とひれ？を使って飛んでいるのはナイショ。
ちなみにBlimpとは飛行船のことを指す。ひとつ賢くなったでしょ？

■基本データ

体長：1.5～2.0ｍ（満タン時）

重量：４

好物：He

嫌いなもの：重い空気、突起物

■説明

研究室出身キャラ第二段。私が研究していた室内用飛行船ロボットを
キャラクター化したものです。
飛行船は子供が操作して遊ぶエンターティメント用のものだったので
どうせなら操作画面を楽しくしようということでブリンプ君が生まれました。

本来は”ロボット”の部分はモーターや信号を受信する部分を指すので、正確には
かごの部分が本体であり、顔がついているところはただの風船です。

しかしそれでは面白くないのでブリンプ君は風船のほうが本体ということにしました。
創作とはそれでいいのです。

こちらは初代ブリンプ君。若干サイズが大きく影も少ないです。

こちらはVersion2。ゲームに使いやすいように32x32の大きさにしていますが、
場合によっては初代と使い分けてもいい感じですね。

ちなみにブリンプ君は色によって性格が違うという設定です。
ロボットなのに性格？とか思ったあなた、今すぐドラえもんを全巻買いに行ってください。

現在のカラーラインナップは以下の3色となっています。

黄：ジャロ君：お気楽でのんびり。とっても扱いやすい初心者向け。
　　　　　　　　カレーがすき。というわけではない。

黒：ネロさん：旋回性能が高い渋めのナイスガイ。
　　　　　　　　昔はやんちゃしていたらしい。

赤：ロッソ君：熱血一直線の期待の若手。
　　　　　　　　直線は速いが旋回性能はいまいち。青じゃなくて赤なのに。

名前の由来はイタリア語でそれぞれの色を表しています。

ブリンプ君が登場するゲームはシューティングかレースゲームがいいかなと思っています。
ちなみにネロさんは昔は悪役として考えていて、どかどか爆弾を落とすようなキャラでした。
その辺もうまく取り入れたいですね。　　

おや、こんなところにネロさんの昔の写真が…

うーむ、このGIFアニメはドラッグオンドラグーンに影響されてますね。

ちなみにブリンプ君につまっているガスはヘリウムです。
可燃性ではないので火を近づけても問題ありません。
まあ、これはやりすぎですけどね。

ミッション01：自機を自由に動けるようにしてみんとす！

2013-02-25T16:19:00.001+09:00

ついに奴らがやってきた……！ということで、毎年のことながら杉花粉の猛威に今から戦々恐々のpon_zuです。既に鼻がムズムズし始めてるので今日はマスク着用での執筆です。

前回の記事で宣言したとおり、今回からenchant.jsを使った新連載「シューティングゲームを育成してみんとす！」を開始します。

記念すべき第1回のテーマは、「自機を自由に動けるようにしてみんとす！」です。

ステップ0：自機の動きを見てみんとす！

前回のコードを動かすと、こんな感じになります。
動かしてみれば分かりますが、自機はクリック/タッチ位置に追従して上下方向にのみ移動できます。

どんなに頑張っても左右方向に移動することはできません。
今回はこの自機を上下左右自由に移動できるようにしてみましょう。

ステップ1：自機を左右方向に移動できるようにしてみんとす！

自機を左右方向に移動できるようにするにはどこをいじればいいのでしょうか？
こんな感じに直してみました。

コード差分はこれだけです。

game.rootScene.addEventListener('touchstart', function (e) {
-            player.y = e.y;
+            player.x = e.x - player.width/2;
+            player.y = e.y - player.height/2;
             game.touched = true;
         });
         game.rootScene.addEventListener('touchmove', function (e) {
-            player.y = e.y;
+            player.x = e.x - player.width/2;
+            player.y = e.y - player.height/2;
         });
         game.rootScene.addEventListener('touchend', function (e) {
-            player.y = e.y;
+            player.x = e.x - player.width/2;
+            player.y = e.y - player.height/2;
             game.touched = false;
         });

タッチ/クリック開始時、スワイプ/ドラッグ時、タッチ/クリック終了時に処理する処理を書き換えて、タッチ位置をplayerインスタンスの位置に代入しています。
playerの幅や高さの半分を引き算しているのは自機の表示位置の調整のためです。
このコードを動かすとこんな感じになります。
狙ったとおり、自由に上下左右に動けるようにはなったのですが、このままでは以下のような問題が残っています。

タッチ/クリック開始時に自機がタッチ/クリック位置に瞬間移動してしまう。
スマートフォンでプレイする際に指で自機が隠れてしまう。

これらの問題を解決するために、もうちょっとコードをいじってみましょう。

ステップ2：自機をスワイプ/ドラッグ距離に応じて相対移動するようにしてみんとす！

先ほど挙げた問題を解決する方法として、自機をスワイプ/ドラッグ距離に応じて相対移動するように変更してみます。

こんな感じに直してみました。

コード差分はこれだけです。

@@ -150,6 +151,18 @@ var Player = enchant.Class.create(enchant.Sprite, {
         this.frame = 0;
 
         /**
+         * タッチした位置からドラッグした距離で相対移動するための変数を追加
+         * - "xs" : タッチ開始時の自機のX座標
+        　* - "ys" : タッチ開始時の自機のY座標
+         * - "xts" : タッチ開始位置のX座標
+        　* - "yts" : タッチ開始位置のY座標
+         */
+        var xs = x;
+        var ys = y;
+        var xts = 0;
+        var yts = 0;
+

...

@@ -179,22 +192,30 @@ var Player = enchant.Class.create(enchant.Sprite, {
          * EventTarget#dispatchEvent で任意のイベントを発行することもできる。
          *
          * ここでは、以下のような処理を登録してしている
-         *    画面がクリックされたとき … 自機をその座標に移動させ、弾を撃ちはじめる
-         *    クリックしている座標が動いたとき … 自機をその座標に移動させる
-         *    クリックが離されたとき … 自機をその座標に移動させ、弾を撃つのをやめる
+         *    画面がクリックされたとき … 移動目標を初期化し、弾を撃ちはじめる
+         *    クリックしている座標が動いたとき … ドラッグした距離に応じて自機を相対的に移動させる
+         *    クリックが離されたとき … 移動目標を初期化し、弾を撃つのをやめる
          */
         game.rootScene.addEventListener('touchstart', function (e) {
-            player.x = e.x - player.width/2;
-            player.y = e.y - player.height/2;
+            player.xs = player.x;
+            player.ys = player.y;
+            player.xts = e.x;
+            player.yts = e.y;
             game.touched = true;
         });
         game.rootScene.addEventListener('touchmove', function (e) {
-            player.x = e.x - player.width/2;
-            player.y = e.y - player.height/2;
+
+            var xNew = player.xs + (e.x - player.xts);
+            var yNew = player.ys + (e.y - player.yts);
+
+            if(xNew > 0 && (xNew + player.width) < game.width){
+                player.x = xNew;
+            }
+            if(yNew > 0 && (yNew + player.height) < game.height){
+                player.y = yNew;
+            }
         });
         game.rootScene.addEventListener('touchend', function (e) {
-            player.x = e.x - player.width/2;
-            player.y = e.y - player.height/2;
             game.touched = false;
         });

タッチ/クリック時に自機の座標とタッチ/クリックされた位置を記録しておき、スワイプ/ドラッグされた距離に応じて自機を相対的に移動させています。ついでに画面端まで行ったら移動できないように移動制限もかけています。この操作方法だと、スマートフォンでプレイする場合もタッチする位置を変えることで指の影に自機がかぶってしまうこともなくなります。動かすとこんな感じです。

さて、今回はここまでです！今回の改造で自機が自由に動くようになりました。次回は何を改造しましょうね？

開発環境などなどその4 バージョン管理編

2013-02-18T23:22:00.000+09:00

どうも gaya_K です。
また風邪をひいてしまいました。体が弱くなって老いを感じる今日このごろです。
敗因は暖房に頼りっきり & 加湿を怠った生活だったので、みなさんも気をつけましょう。

今回はソフトウェア開発に欠かせないバージョン管理についてです。

開発環境紹介

分散バージョン管理（DVCS）

バージョン管理とは言ってみれば冒険の書です。
以前 Dropbox を紹介した時にもバックアップをとってくれると説明しましたが、
更に進んだ管理を可能にするツールがあります。

いくつかある分散バージョン管理システムの中で、私達は Bazaar というソフトを使っています。
手前味噌ですが、私個人のブログで使い方の記事を書いているのでそちらも参考にしていただけると幸いです。
（長いこと続編を書くのをサボっているのは内緒です）

DVCS三兄弟（Git, Mercurial, Bazaar）の中では一番人気のない（泣）Bazaarですが、
とっつき易さでは一番かと思います。

下の絵は最近リリースした「プリンスイーパーま～さん！」のコミットログです。

一つ一つの点がセーブポイントに相当します。こうして見ると結構コミットしてたんですね。

何箇所か、枝分かれしてまた合流している部分がありますね。
その部分が "分散"バージョン管理の特徴です。
別々に作業して、あとからセーブデータを合体できるようなイメージです。
ドラクエじゃあそんなことできませんよねｗ

それと、最近 Github を始めたので Git も使い始めました。ちょっぴり浮気中ですｗ

キャラクター紹介005

2013-02-04T06:22:00.000+09:00

こんにちは、Braveです。

今年ももう二月ですね。一年に3個ゲームを出すとなると単純計算で
1つにかけられる時間は4ヶ月というわけですね。
現在作成中のゲームの進捗率的にはトントンというとこですかね。
※3人とも仕事があるので実際の作業時間だけ見るとそんなにはかかっていませんよ。

ちなみに次回策は一風変わったシューティングといった感じです。
※シューティングとは言えないかもしれませんが･･･

では今年一発目のキャラクター紹介です。

No.005　ロボ蔵

高機能多目的ロボット。
ポケットもついていなければ中にお爺さんが入ったりはしていない。
命令されたことは絶対に守る。たぶん。

■基本データ

体長：ご希望にあわせてお作りいたします

重量：重いですよ、高機能ですから。

好物：電気、オイル

嫌いなもの：ルーチンワーク

■説明

もともとは研究室のホームページ用のキャラとしてBraveが落書き感覚で作成したキャラです。
古きよき"ロボット"を意識したデザインであり、手は有名な芋掘りロボットをモデルにしています。
pon_zuによってFLASHゲームの試作品の主人公としてロックバスターっぽいものを
装備させられていたこともあり、この設定は今後BraveWorkzでも使っていきたいと思っています。

ちなみにこんな落書きも見つけましたよ。
きっとどこかで使われるはずです。

~~竜巻旋風脚！~~ロボトルネード！

上の画像に出ているロボ蔵は量産型であり、たくさんいます。
ちょっとお高い隊長機はもちろんツノが装備されており、移動速度も3倍となっています。

※個人の感想です。

実はプリンスイーパーま～さんの背景として登場していますが、窓の外で遊んでいたり、卵がほしいのに雄鶏を運んでいたりと少々頼りにならないやつらもいるようです。

左：急ぐであります！

右：ねぇこれオスじゃないの？

左：鶏だから卵を産むに決まってるであります。

右：そ、そうだね･･･

ロボットですが、固体差が大きいので主人公気取りのこんなのもいたりと今後の活躍に期待が持てるキャラクターです。

ヘイ、カモンカモン！

連載企画を始めてみようとか思ったり

2013-01-27T10:00:00.000+09:00

あけましておめでとーございます！
職場で周囲の人が風邪やらインフルエンザで倒れていく中、マスク着用で頑張ってますpon_zuです。

BraveWorkzとして新年のご挨拶させていただいてからちょっと時間が空いてしまいましたが、決してこのブログの更新忘れてたわけではありません！
自分が当番だということをすっかり忘れてたせいでBraveくんにせっつかれたり！
gaya_Kくんと「次から更新忘れないようにカレンダーに登録しておこうか」みたいな話をしたりはしていないのです！
ええ、していませんとも！！

……さて、今年もこんな感じで無駄話しつつ元気に頑張っていきますよ！
さっそくですが、年の初めらしく今回から新しいことを始めてみようと思います！
まず最初に、みんなゲーム好きだよね？（断言）

何始めるの？

私はゲームが好きです。
プレイするのも好きですが、最近は作るのもとても楽しいです。
ゲームを作れて、遊べて、他の人にも遊んでもらえる。
全く良い時代ですね。
BraveWorkzのゲームに興味を持ってくれた人たちにもぜひゲームをつくる楽しさを感じてほしい！

と、完全無欠な余計なお世話な思考の結果、新しく連載企画を始めることにしました！
タイトルは「○○ゲームを育成してみんとす！（仮）」！！

で、結局何するの？

みんな大好きゲームアプリ開発のためのHTML5 + JavaScript フレームワーク「enchant.js」にはライブラリと同梱のサンプルゲームが幾つかついてきます。
このサンプルゲームを素人プログラマーな私が少しづつ改造していき、立派なオリジナルゲームに育てていこうという企画です。
私の勉強にもなって一石二鳥！！

で、最初のターゲットとして、シューティングゲームのサンプルを選びました。

一番とっつきやすく、尚且つ色んな要素が含まれているジャンルですしね。
なので、次回からしばらくは「シューティングゲームを育成してみんとす！」でいきたいと思います。

準備をしよう

次回以降、育成をしていくために下準備をします。
具体的には「enchant.js」の最新版ダウンロード一式からシューティングゲームのサンプルプログラムを抜き出してjsdo.itで動作するようにしておきます。

まずは「enchant.js」の最新版一式をGithubからダウンロードしてきましょう。

https://github.com/wise9/enchant.js

ダウンロードしてきたzipファイルを解凍して「examples\expert\shooting」フォルダを覗くと、index.htmlがあると思います。

index.htmlの中身を見ると、enchant.js本体以外にui.enchant.jsとnineleap.enchant.jsを使っていることがわかります。

jsdo.itで標準で用意されているのはenchant.js本体だけなので、ui.enchant.js、neleap.enchant.jsは別コードとしてアップロードしておくことにします。ついでに使用する画像もアップロードします。
ここで注意しないといけないのは、ui.enchant.js、nineleap.enchant.jsで使用されている画像のパスを全てjsdo.itにアップロードしたファイルのパスに書き換えとかないといけないことですね。
そして、出来上がったのがこちら。

まだサンプルそのままです。
次回からこのコードを育てていこうと思います。

完全に思いつきで始めた連載企画なので、今後どんな展開になるかはわかりませんが、よろしければどうぞお付き合いください。

それでは～。

新年のご挨拶

2013-01-09T00:30:00.000+09:00

遅くなりましたが、あけましておめでとうございます。gaya_K です。
今年も BraveWorkz をよろしくお願いいたします！

2011年の研究室メンバーの忘年会（だったかな？）のノリで結成された BraveWorkz は無事に 2013年を迎えることがでいました。
9leapで作品を2つ公開することもできたし、順調だったと思います。

今年の目標

BraveWorkz としての目標は去年より多く作品をリリースすることですかね。（今勝手に決めました笑）
目指せ 3作リリース！

あと、個人的には TypeScript か Haxe のどちらかで 1作ゲームを作れればなぁと。
私は普段仕事で C# を使った開発をしているので、強い静的型付でバリバリ入力補完してくれる方が好きです。

C#er なので Mircosoft 製の TypeScript を贔屓にしたいのですが、情報量等を考えると Haxe のほうが優勢ですかね？

現状、 ~~Haxe がジェネリックも唯一実装されてるみたいだし。~~
JSX にもジェネリック実装されているようで。。。
主要な IDE が SharpDevelop ベースなので、 Visual Studio と大差なくつかえそうな気がします。

それと、遅筆なのでそれも直すようにしないと。。。

キャラクター紹介004

2012-12-24T15:51:00.000+09:00

こんにちは、Braveです。

早いものでこのBraveworkz結成からもうすぐ一年となります。

なんとか今年中に２個ゲームをリリースできて一安心しています。

さて、4回目となる今回のキャラクター紹介はこちら。

No.004　プリン

ミルクと卵の奇跡の出会い！
とろける甘さでお子様のハートをわしづかみ！
お菓子の定番、そいつの名前は
　　　- プリン -

■基本データ

体長：両手に収まるくらい
重量：お徳用200g
好物：新鮮な卵、牛乳
嫌いなもの：ワゴンセール

■説明

第二作目の主要？キャラクターのプリンです。

実はこのプリン、gaya_k発案のキャラクターです。
ちなみにこれもgaya_kの友達のあだ名が由来だそうで、その辺の話は
後々gaya_kから語られることになるでしょう。

そこにBraveが悪乗りで亜種をどんどん作成していき、
今では20種類に迫る勢いとなっています。

2012/12/24現在プリンスイーパーま～さんに出現するには3種類。
のちのちアップデートで種類を増やしていく予定です。

今回はちょっとだけ他のプリンもお見せしちゃいますよ。

プレーンプリン。素朴で飽きのこない味わい。
トッピングであなた色に染めてね。

コーヒープリン。大人にあこがれたブラック仕様。
お腹の中まで真っ黒。

みんなのアイドル、カラメリーゼちゃん。赤いリボンと
パッチリおめめがチャームポイント。

コーヒープリン団にさらわれたカラメリーゼをプレーンプリンの勇者が助けに行くのは
また別のお話…

プリンスィーパーに登場するプリンたちはこちら

抹茶プリン。大人の渋み溢れる逸品。ヒゲ？いやいやクリームでしょ？

アラモード。生クリームとチェリーで女子受けを狙ったあざといプリン。

ただしカロリーにまでは気がまわらなかった。

ちなみにBraveはプリンよりゼリー派。

新作公開！プリンスイーパーま～さん！

2012-12-09T13:30:00.000+09:00

こんにちは。pon_zuです。
ついに！ついに！ついにっ！！このご報告ができます！

Brave workzの新作ゲームを公開しました！

その名も、「プリンスイーパー　ま～さん！」です。

スマホでもPCでも遊べますので、ぜひ遊んでみてください！

今週は新作の内容と高得点を稼ぐためのコツをご紹介します！

概要

「ま～さん」三兄弟を操作して増え続ける「プリン」を倒し（食べ？）続けるゲームです。
制限時間は90秒！果たしてあなたは何体倒せるか！？

前作の「一“毛”打尽」でも活躍したま～さんが今回も活躍してくれます。

今回は赤色と青色のバリエーションが登場です。生みの親であるBraveくん曰く「ま～さんというのは種族名」とのことですが……ゲームの設定やストーリーに関しては次回以降の記事で明かされると思います。

ルール

ゲームのスタート画面でも小さく表示されますが「プリン」の種類によって倒した時の効果が異なります。

プレーンプリン：10点
抹茶プリン：制限時間3秒加算
プリンアラモード：「ま～さん」巨大化

1体の「ま～さん」で多くのプリンを倒したほうが高い得点が得られます。

操作方法

画面タップ：「ま～さん」発射 ※タップした位置によって発射方向が変化します。
※「ま～さん」は3体まで連続で発射できます。

攻略法

攻略法について、Braveくんがこんなつぶやきをしていました。

アラモード４個くらい取るとモリモリ食べれてて爽快ですね。 / SCORE: 5800 - プリンスイーパーま～さん！ 9leap.net/games/2717/ #9leap #9leap_2717
— wadaさん (@BrvFlame) 12月 8, 2012

ゲーム中、たまにクリームとさくらんぼがのった「プリンアラモード」が出現します。

これを倒すと…

でかっ！
「ま～さん」が巨大化し、多くの「プリン」を一気に倒せるようになります。
この巨大化した「ま～さん」を大事に使ってあげれば一気に高得点をゲットできるはず！

最後に

新作「プリンスイーパー　ま～さん！」 。
BraveWorkzメンバ全員で楽しい要素を盛り込みました。
今後も追加要素をアップデートもできたらいいなーとか企んでいたりしますので、ぜひぜひ遊んでみてくださいね！

スマホの方はこちらからどうぞ。

開発環境などなどその3 お絵描き編

2012-12-02T00:39:00.000+09:00

どうも gaya_K です。

最近風邪をひいて咳が止まりません。
先週末は飲み会等でタバコを吸う方数人に囲まれて余計に悪化してしまいました。
あ、BraveWorkz は誰もタバコを吸わない健全な集団ですよ（笑）

さてさて今回はお絵かき編です。

開発環境紹介

ドット絵（ラスター画像）

ドット絵とはお馴染みの一つ一つ点を打っていく絵のことです。
BraveWorkz で作っているゲームのキャラクターや背景は基本的にドット絵です。

グラフィック担当 Brave君の得意分野でもあります。

ツールは Edge というものを使っています。
Edge は古くからある編集ソフトで、シンプルながら十分な機能を揃えています。
こういう長く使われるソフトウェアを作ってみたいですね！

下の画像は次のゲームで使用するま～さんの画像を Edge で編集しているところです。

ベクター画像

ベクター画像とはラスター画像と違い、拡大/縮小しても情報が失われない画像のことです。
ゲームではあまり使っていませんが、 BraveWorkz を結成するにあたりロゴを作ったりするのに使用しました。

こちらは Inkscape を使っています。
非常に高機能で、お金をとってもいいくらいです。
こういうソフトを使ってみると、IT業界はこういったオープンソースコミュニティの善意で成り立ってる部分が多いなと実感します。
感謝して使わなければいけませんね！

下の画像は BraveWorkz のロゴを Inkscape で編集しているところです。

開発中のゲームの話

先週末に定期ミーティングを行い、Ver. 1.0 として公開できるレベルまで持っていけたと思います。
あとちょっとです！

キャラクター紹介003

2012-11-17T16:01:00.000+09:00

こんにちは、Braveです。

早いもので今年もあと一ヶ月と少しですね。
新作も早く出さないと...

No.003　ヤマト

幸運の象徴、黒猫さん。しゃべったり白猫の奥さんがいたりはしない。
ま～さんにアイス(ふたの裏についたやつ)をもらって以来近くをうろつく様になった。
ヤマトだから黒猫なのか。黒猫だからヤマトなのか。

■基本データ

体長：通常の倍ぐらい
重量：重い
好物：毛玉
嫌いなもの：サンマ

■説明

bravewave時代に作成した激走ま～さんにて初登場。
ゲーム内では登場しないと説明に書かれていたが、あることをすると操作キャラになる。
実はま～さん以外のキャラで操作ができる初のキャラクターでもあります。

ヤマトの走るアニメーションはなかなか気に入ってたりもします。

※ちなみにジャンプモーションは前宙していると思いきやよく見ると
側宙をしているのはナイショ。決して手を抜いたわけではない。

ちなみにドット絵に関してですが、Braveは特に絵を習ったことはないので適当に描いています。
パースがなんだとか影の付け具合がなんだとかは二の次です。
らしく見えることをモットーとして描いていますので、温かい目で見守ってください。

プログラムで遊ぼう！：enchant.jsでゲームアプリを作るときに見ておきたい５つの記事

2012-11-10T20:04:00.001+09:00

こんにちは、Windows Live Writerを使い始めてみたpon_zuです。

失礼ながらあまり期待していなかったのですが、結構快適で良い感じですね。しばらく使い続けてみようと思います。
<p>タグが生成されまくるので、ちょっとソースの整形をしたくなりますが…
さて、最近twitterのタイムライン見てると「これからenchant.jsを使ってみる！」という人も増えてるみたいなので、どちらかと言うとenchant.jsをこれから使おうとしている人向けenchant.jsに関するブログ、動画、発表資料を集めてみました。

どれも私のEvernoteにクリップされてたものなんですが、今回この記事を書くにあたって見直してみて、改めて勉強になりました。

1.「#CEDEC2012 JavaScriptベースゲームエンジン徹底比較」

#CEDEC2012 JavaScriptベースゲームエンジン徹底比較 from Ryohei Fushimi

enchant.jsを含めたJavascriptベースのゲームエンジンの比較をしてくれている資料です。

enchant.jsはHTML5+Javascriptでのゲームアプリ開発を行う上で、非常に素晴らしいゲームエンジンですが、唯一絶対の選択肢ではありません。これからenchant.jsを使ってみようという人には、いきなり出鼻をくじくようですが、enchant.jsの特長を理解した上で、「自分の作りたいもの」と照らしあわせて使用を検討したほうがいいと思います。

2. 「enchant.jsで10分間でシューティングゲームを作る!」

enchant.js関連の動画としては非常に有名な、UEIのCEOshi3zさんによるプログラミング動画です。

私はこの動画を見て、「ゲームプログラミングは難しい」という既成概念を破壊されました（笑）。
動画内で作成されているのは非常にシンプルなシューティングゲームですが、ここまでゲームの骨組みができてしまえば、グラフィックやアイテムを追加することでオリジナルゲームができてしまう訳で。

これからenchant.jsをはじめる人はまずはこの動画を見てモチベーションを上げましょう。
プログラム初心者の方でも「よく分からないけどenchant.js凄いなー」と実感できると思います。

3.「enchant.js 怒涛の 100 tips」

enchant.js 怒涛の 100 tips

これまた有名な記事ですが、enchant.jsの本も執筆されているphiさんのブログです。

enchant.jsの基本から簡単なゲームを作るところまで解説されています。
コードはjsdo.itで公開されているので、この記事を読みながら勉強していく方はアカウントを作成しておくといいと思います。

プログラミングしててハマった時にこの記事見て復習したりしてます。

4. 「enchant.js でゲームを作るコツ」

enchant.js meetup Tokyo #2 「enchant.js でゲームを作るコツ」 from Ryohei Fushimi

phiさんの記事を読めば、enchant.jsでゲームアプリを開発するのに必要なプログラミングの知識は習得できます。

では、あとゲーム開発で大切なのは……という資料です。難しいですね。

5.公式ドキュメント

公式ドキュメント（基本機能）

公式ドキュメント（プラグイン機能）

見出しの通り、Githubで公開されているenchant.jsの公式ドキュメントです。

最後に公式ドキュメントを持ってくるのはどうかという話もありますが、私は非常によくお世話になります。

ある程度プログラミングの経験がある人なら、公式ドキュメントとソースコードのコメントを読むのが一番勉強になるんじゃないでしょうか。
enchant.jsはすごいスピードで進化しているので個人ブログに投稿されている記事だと情報が古くなっている場合もありますしね。

次回作の話

次回作についてはちょっと前からこのブログで触れてますが、現在レベリングの最中です。
早めに公開できるようにがんばるぞー

開発環境などなどその2 企画編

2012-11-04T11:14:00.000+09:00

どうも、gaya_Kです。

前回に続いてどんなツールを使っているか説明していきます。
Dropbox を使ってファイルを共有することができるので、今度はそれを使ってゲームの企画を共有していきます。

開発環境紹介

ブレーンストーミング

、、、というほどのことはしていないかもしれませんが。

ゲームの企画は、主に Brave君が溜め込んだアイデアから「これをやってみよう！」と選んで決め、そこから少しずつ詳細を詰めて行きます。

議論自体は定期的なミーティングやチャットで行いますが、そこでまとまったアイデアを記録していく時にマインドマップツールの一つ FreeMind を使っています。

マインドマップとは。。。
http://ja.wikipedia.org/wiki/%E3%83%9E%E3%82%A4%E3%83%B3%E3%83%89%E3%83%9E%E3%83%83%E3%83%97

マインドマップはトニー・ブザン(Tony Buzan)が提唱した思考・発想法の一つ。頭の中で起こっていることを目に見えるようにした思考ツールのこと。
（中略）
描き方は、表現したい概念の中心となるキーワードやイメージを中央に置き、そこから放射状にキーワードやイメージを広げ、つなげていく。
（中略）
本来は紙とペンで描くものだが、コンピュータ上で描くための専用ソフトウェアもいくつかある。

本来の使い方とは違って、マインドマップというよりはアイデアマップという感じですかね。
しかし、アイデアが階層的に視覚化されて見やすいのでおすすめです。
私は業務でも打ち合わせ中にプロジェクターで表示しながら使ったりします。

下の画像は「一“毛”打尽」で使用した FreeMind のスクリーンショットです。

これを DropBox 上で共有して、チームみんなで編集しています。
FreeMind はこの手のソフトの中でも老舗なので、スマホのマインドマッピングアプリでも表示・編集が可能なので便利ですよ。

開発中のゲームの話

「まーさんボール」も少しずつ形になっています。
ただ、私の JavaScript に対する知識不足があったりしてつまずいていました。
実行するまでわからない点が多いのはスクリプ言語の難しいところですね。
そういった部分を解決してくれる heXe や TypeScript の今後にはかなり期待しています！

キャラクター紹介002

2012-10-27T01:15:00.000+09:00

こんにちは、Braveです。
他二人はなんだか難しい話をしているのでゆるめにキャラ紹介第二段です。

No.002　謎の男

お金のために色々と怪しいビジネスをしている。
自分の手を汚さずに儲けることが信条。
最近、カモ　ビジネスパートナーとして変な丸い生物を見つけたらしい。

■基本データ

体長：人並み
重量：標準
好物：お金
嫌いなもの：タダ働き

■説明
ま～さんを主人公格にしたことで悪役が必要になったため、急遽作成したキャラクター。
当初のイメージはワイリーやエッグマンといった、いわゆる"あくの天才科学者"。
しかし、ずるがしこさ、うさんくささを重視したため、科学者から商人(ブローカー？)へと変更した。

一"毛"打尽では中華な格好をしているが、特に意味はない。
バイキンマンのように変装してま～さんに近づいているだけである。

いつのまにかにこんな格好であなたのそばに来ているかもしれませんよ。

イイハナシアルヨー！

本名はナイショ。

プログラムで遊ぼう！： enchant.jsでパーティクルを作ってみた

2012-10-17T18:00:00.000+09:00

こんにちは。こんばんは。おはようございます。
BraveWorkzコーディング担当のその2、『アンコはこし餡の方が好き！』pon_zuです。
さて、今回の開発日誌のテーマはズバリ「パーティクル」です。
パーティクルというのは、こんなのです。
js.doit - パーティクル
以前から色んな人が作ったパーティクルを見て「うおー、キレーだなー」と、憧れていたのですが、やっぱり見てるだけじゃつまらない！自分でも作ってみたい！！
ということで、いつもはゲーム作りに使用しているenchant.jsを使って作ってみました。

パーティクルを描画するのに必要なもの

enchant.jsで一番良く使われるのはSpriteクラスですが、今回のパーティクルの描画にはSurfaceクラスを使用します。SurfaceクラスはHTML5で実装されたcanvas要素をラッピングしたクラスで、Surfaceクラスを経由することで、enchant.jsからcanvas要素を操作することができます。
enchant.jsを使ったcanvas要素の操作に関しては、phiさんが以下の記事に分かりやすくまとめてくださっています。
enchant.js 怒涛の 100 tips

完成品

jsdo.itに投稿されてるパーティクルのコードを参考に、早速作ってみました。

Surfaceクラスをあまり使ったことがなかったのでちょっと手間取りましたが、勉強しながらでも2時間位で形になりました。さすがenchant.js！！
マウスクリックした場所に流れていくだけの単純な動きですが、結構綺麗で満足です。

え？何か黒いのが見えてる？いやいや、気のせいですよー？

さて、次は何して遊ぼうかなー。

次回作について

もちろん遊んでばかりじゃありません！
次回作も鋭意開発中です。
こっそり作業状況を覗いてみたところ、brave作のドット絵も大分力入っていたので、ゲームの内容はもちろんグラフィック面でも前作よりも更にパワーアップしたものをお見せできると思います！

どうぞお楽しみに！

開発環境などなどその1 ファイル共有編

2012-10-09T23:04:00.002+09:00

どうも。
主にコーディングを担当している gaya_K です。

コーディング担当と言いつつ、最近コードを書くのをサボってます。スミマセン m(_ _)m

まずは私達がどんなツールをつかって開発しているかを説明していこうかと思います。
基本的には無料のツール＆サービスを使って開発していますので気になった方は使ってみてください。

開発環境紹介

ファイル共有の方法

チームでのファイル共有は必須ですね。
私達はクラウドストレージサービスの Dropbox を使用しています。

似たようなサービスだと、 Google Drive や Microsoft の Sky Drive がありますね。

Dropbox では特定のフォルダを複数人で共有することができるので、BraveWorkz 専用のフォルダを作成して、その中へソースコードやキャラクター画像、企画書をアップロードして共有しています。

Dropbox は PC内のフォルダとサーバ上のフォルダを自動で同期しているので、何も気にせず自分のPCでファイルを保存しただけでも、メンバーのPC上に展開されたりするんです。
これは開発だけでなく、写真の共有だったりいろいろなことに使えますよ。

他にクラウドストレージのいいところはただ保存しているだけでも、サーバ側では何世代か前までバックアップがされていて、間違って削除したり変更したファイルを元に戻せる点ですね。
自分の知らないところで冒険の書が保存されてるなんて素敵じゃないですか！（笑）

開発中のゲーム

ま～さんボール

私が今担当しているゲームの紹介も少し。

静止画じゃあ何をしているかわからないと思いますが、それは謎のままで。
先のキャラクター紹介であった「ま～さん」とプリンみたいなキャラクターが映ってますね。

まだ背景がないので味気ないですが、Brave君が素敵な背景を描いてくれることでしょう！

すでに公開中の「一“毛”打尽」を作っているときに思いましたが、背景ができると途端にゲームらしくなります。
ロジックも大事ですが、やはり視覚で訴えるものがあってこそですよね。

キャラクター紹介001 ま～さん

2012-10-04T01:37:00.000+09:00

こんにちは。
代表(でいいの？)のBraveです。
主にグラフィックと企画を担当しています。

プログラミングについてはアルゴリズムを考えるのは好きですが、
あまり詳しいところは知らなかったりします。

なので私はこのサイトのキャラクターを紹介していこうと思います。

初回はもちろんアイツです。

No.001　ま～さん

Braveworkzの看板キャラクター。
性格は非常に軽く、友好的。
一言で表せば"エロいやらしい"。

■基本データ

体長：サッカーボールくらい
重量：軽め
好物：アイス
嫌いなもの：黒い背景(毛が見えなくなるため)

■説明

Braveが高校時代に友人の十年後の姿を想像して描いた落書きを基に誕生。
初期の構想ではカービィで言うワドルディのポジションで考えており、大群で
押し寄せては吹っ飛ばされるという役だったが、情が移ってメインキャラに昇格した。
そのため、基本的には攻撃手段を持っていないが、変身することで
攻撃手段を持つこともある。
※ただしまだゲーム内で発揮されたことはない。

生命力と運はずば抜けていて、どんなにやられてもお湯に浸かってしばらくすると
復活する性質を持つが、頭の毛が抜けると死んでしまうらしい。

なお、ま～さんというのは種族名なので大きいのやら小さいのやらいろいろいます。

ブログデザインを新しくしました

2012-09-30T21:47:00.000+09:00

ブログデザイン担当のpon_zuです。
BraveWorkzのブログデザインを新しくしました。

BraveWorkzのブログはGoogleの無料ブログサービスであるBloggerを使用しています。
これまでは公式で提供されているシンプルなテンプレートをほとんどそのまま使用していたのですが、思い切ってオリジナルのテンプレートにカスタマイズしてみました。
久しぶりにHTMLとCSSに触ったので、大分悪戦苦闘しましたが、やりたかったことを色々詰め込めたので一先ず満足です。

さてさて、情報公開する場が整ったので、ゲームアプリ開発の方も頑張っていきますよ～！

BraveWorkz

ラインスタンプ発売！

LINEスタンプを販売開始しました！

enchant.hxを使ったHTML5ゲームアプリ開発のススメ

enchant.js+Haxeでどうやってゲーム作るの？

基本的なゲームループについて

今日のまとめ

コラボレーション！

「TIGER CLAW」や「Bluest」シリーズで有名なMYKさんとのコラボレーションが実現しました！

そして、まーさんがゲーム本編にも登場するモードもあります！

ダモポンは決められた制限時間（1分、3分）のなかでダモモを倒しまくるゲームなのですが、なんとまーさんをたたくと持ち時間がマイナス5秒されてしまいます！

キャラクター紹介0007

No.007 Nox

開発環境などなど その5 集合場所編

喫茶店

ルノアール

コワーキングスペース

ターミナル

タマリバ

ミッション02：敵機の種類を増やしてみんとす！

ステップ1：敵機の画像を変えてみんとす！

ステップ2：敵機の強さを変えてみんとす！

BitbucketとMSYS Git、tortoisegitでバージョン管理環境の構築

Bitbucket

MSYS Git、TortoiseGit

Haxe はじめました

インストール

enchant.js を使う

キャラクター紹介006

No.006 ブリンプ君

ミッション01：自機を自由に動けるようにしてみんとす！

ステップ0：自機の動きを見てみんとす！

ステップ1：自機を左右方向に移動できるようにしてみんとす！

ステップ2：自機をスワイプ/ドラッグ距離に応じて相対移動するようにしてみんとす！

開発環境などなど その4 バージョン管理編

開発環境紹介

分散バージョン管理（DVCS）

キャラクター紹介005

No.005 ロボ蔵

■基本データ

■説明

連載企画を始めてみようとか思ったり

何始めるの？

で、結局何するの？

準備をしよう

新年のご挨拶

今年の目標

キャラクター紹介004

No.004 プリン

■基本データ

■説明

新作公開！プリンスイーパー ま～さん！

概要

ルール

操作方法

攻略法

最後に

開発環境などなど その3 お絵描き編

開発環境紹介

ドット絵（ラスター画像）

ベクター画像

開発中のゲームの話

キャラクター紹介003

No.003 ヤマト

プログラムで遊ぼう！：enchant.jsでゲームアプリを作るときに見ておきたい５つの記事

1.「#CEDEC2012 JavaScriptベースゲームエンジン徹底比較」

2. 「enchant.jsで10分間でシューティングゲームを作る!」

3.「enchant.js 怒涛の 100 tips」

4. 「enchant.js でゲームを作るコツ」

5.公式ドキュメント

次回作の話

開発環境などなど その2 企画編

開発環境紹介

ブレーンストーミング

開発中のゲームの話

キャラクター紹介002

No.002 謎の男

プログラムで遊ぼう！ ： enchant.jsでパーティクルを作ってみた

パーティクルを描画するのに必要なもの

完成品

No.007　Nox

開発環境などなどその5 集合場所編

No.006　ブリンプ君

開発環境などなどその4 バージョン管理編

No.005　ロボ蔵

No.004　プリン

新作公開！プリンスイーパーま～さん！

開発環境などなどその3 お絵描き編

No.003　ヤマト

開発環境などなどその2 企画編

No.002　謎の男

プログラムで遊ぼう！： enchant.jsでパーティクルを作ってみた

開発環境などなどその1 ファイル共有編

No.001　ま～さん