カード、合成、ガチャ、体力と回復アイテム、ソーシャルメンバーを連れてダンジョンをクリアすると次のダンジョンクエストが登場して、、という最近のソーシャルカードゲーム要素をおさえつつ、ネイティブアプリなので画面遷移はスムーズで演出もリッチ。

でもそういうゲームはもう何本もあるんです。特徴はクエストでのバトルのシステム。
「パズル＆ドラゴンズ」はタイトルの通り、画面下に並んだストーンパズルでバトルするんです。

「あ、海外のPuzzleQuest2と同じね。」と思い当たる人もいるでしょう。僕も最初そう思ったのですが、、裏切られました。
パズルのルールも違いますし、パズルとバトルの絡め方もオリジナルの面白さ。そのせいもあって、巷のソーシャルカードゲームとも別モノの面白さに仕上がっていて、何やらソーシャルカードゲームの新しい基軸になりそうな予感さえします。

とっかかりのパズル、習熟と応用を発見する嬉しさ

最初は、よくある３マッチゲーム（ストーンを３つ並べると消えるタイプのゲーム）だと理解して、２つ並んだストーンに同じ色のストーンをくっつける方針でプレイしていきます。
ところがこのゲームのストーンは、ドラッグでどのマスにも動かすことができるので、そのドラッグの軌跡上の他のストーンの位置もどんどん動いていきます。これを活用することで、１回の移動で他のストーンを自在に並べ替えて大量に消すことができるんです。ゲーム序盤はそこまで考えなくてもすんなり進めることができますが、徐々にこのテクニックが必要になってきます。そしてこのテクニックを使いこなせてくるとすごく気持ちいい！
最初は３並べゲームとして説明不要で取っ付きやすいというメリットがあり、プレイヤーは自由に遊べる。やりこんでいくと難易度が上がり壁にぶつかることでユーザー自身が手だてを考え求めて、応用テクニックを見つける。「あ、なるほどこうすればいいんだー」という発見ができる楽しさがあるんです。

上級者テクニック via:appbank

とにかくこの変則３マッチタイプのこのシステム、とてもよく考えられています。ストーンをタップする前にじっくりどう動かすか考えることができ、ドラッグを開始するとドラッグには制限時間があるので緊張感が生まれます。そうそう思いつかない。僕がプレイしてきたゲームの中では初めて見る仕立てなのですが、うーん誰が考えたのでしょう。すごい。

コンボ感

ゲームたるもの、この「コンボ感」があるとないでは楽しさが大きく違ってくると思います。
このとき大事なのはコンボの演出方法。「パズル＆ドラゴンズ」では自分のキャラの攻撃力が消えたストーンのコンボ回数に応じてアップするのですが、攻撃力の数値がどれだけ上昇したか以上に、コンボのたびに音（SE）がグングン上昇していくことが気持ちよかったりするんです。もしコンボ回数に応じてSEの音階が下がっていったりしたら気持ち悪いでしょう？それはやらないとしても、同じ音階の音を使い回しちゃうことはありえなくもないですよね。でもマリオがノコノコを蹴っ飛ばして敵をなぎ倒していく時、どんな音が鳴ってましたかっていう話ですね。
コンボ要素を入れることと、コンボできたらちゃんと褒めること、というのは僕もゲーム作るときは大事にしたいなと考えています。

負けるとちゃんと「くやしい」

ストレスとそれを克服した時の快感、これもゲームの大切な要素ですから、敵にやられてゲームオーバーになっちゃうこともあります。この時いちばんいいのはユーザー自身に「自分がミスしたので負けちゃった！」と思わせて「次はもうちょっと上手にやってみよう」と再戦するモチベーションを持たせることです。
最近のソーシャルカードゲームは、カードのパラメーターのみで勝敗が決まるゲームが多く、実はバトル前に数値的に勝敗は決していて、ユーザーはボタンを押すだけだったりします。ですから負けた時は「カードが弱かったんだ！」という事実だけを押し付けられるのみ。それではということで、またクエストをしばらくこなしてレベルを上げるか、ガチャやトレードでより強いカードを手に入れるかになってくるのですが、このシステムのデメリットは再戦するまでに時間がかかること。 カードを強くするのも時間かかるし、昨今のソーシャルカードゲームでは１回の戦闘で全体力を使い切るので、課金アイテムで体力回復しないとそもそも即時リベンジがしにくい。スマホになっても大半はその仕立てを引き継ぎがちでした。
鉄は熱いうちに打ってほしいのと同様、ゲームでもやられてからリベンジまでの時間は早ければ早い方がいいと思うんです。その方がリベンジできたときの感動も大きくなるから。

テクニックとラッキーのバランス

プレイヤーに「自分のせいで負けた」と思わせたいのに、運の要素が入るのはどうなのよ？いやいや運の要素があるからこそゲームは楽しいってもんですよね。
次こそはいい感じのストーンがやってくるかもしれない！ラッキーで勝てるかもしれない！と思わせる仕立て。もちろんユーザーテクニックとラッキー要素のバランスが大事。
「負けた、、あそこでミスったかなぁ。次やれば運良く勝てるかも？」→「勝った！僕って天才！！」
と思わせる絶妙なバランスがとれてるゲームはきっと面白いんです。マリオで調子に乗ってBダッシュで死んだ時、ドラクエでいけると思って回復せずに攻撃したら全滅した時、どちらも自分の選択の非を認めることができたし、逆にうまくいったときは得意げになれました。それが味わえるのがゲームなんだと思っていたら、ソーシャルゲームの登場でそれがなくても別の魅力で成立するタイプのゲームが出てきて、昔のゲームで育ったユーザーは戸惑った。その点では「パズル＆ドラゴンズ」は前者に近い心境を味わえるゲームだと思います。

シンプル

クエストにパズルという新しい要素が足されている分、「パズル＆ドラゴンズ」にはユーザー対戦バトルやトレード、ギルドなど、ガラケーでよくある機能がなかったりします。だからゲームが煩雑になっていなくていいです。チュートリアルは短く、このゲームの特徴であるパズルゲームが早速始まる導線になっています。UIもガラケーの前提にとらわれない、スマホに最適なUIになっています。

ガラケーのUIルールではなく、AppleのHIGベースでデザインされていますね。

ほどよい課金体系

「パズル＆ドラゴンズ」の課金アイテムは「魔法石」だけです。この魔法石を１個消費して体力回復したり、カード袋の上限を増やしたり、魔法石５個消費してレアガチャを回したりするようになっています。魔法石の使い方をプレイヤーが自由に選べるので、自己責任感が高く、課金消費への抵抗感が軽くなります。また、魔法石は新規ダンジョンをクリアすると１個もらうことができるので、そこで頑張れば無課金でもレアガチャが回すことができます。ダンジョン数は有限なので、よく考えるとそんなに個数が手に入るわけではないのですが、無課金スタイルのプレイヤーには「無課金でももしかしたら！」と思わせ、課金プレイヤーには「無課金でも手に入るものをちょっと課金してちょっとだけゲットしよう」という課金で圧倒的優位に立ってしまう背徳感が軽減されるという効果があるのではないでしょうか？
シンプルに魔法石に集積させることによって、いい意味でのはぐらかし方ができていて、それが課金の心理的障壁を下げているように思います。
あと、ダンジョンの途中でやられてしまった時、魔法石を１個消費してその場でコンティニューすることができるので、思わずここで貴重な魔法石を使ってしまうことがあります。でもこの時、自分がミスしたせいでやられてしまったので、残念ながら１個使おう、、ちょっと卑怯だけどトホホ。という心境になるのです。ここでも「自分のせいでやられた！」と感じさせる仕立てのメリットが活きています。

ガラケーからスマホになっていく中、カードゲームが進化するのは必然なので、これからいろんなアイデアが出てくるかと思います。個人的には、ガラケーの決定キー押すだけでは物足りない、とはいえ Magic the Gathering ほどの込み入った戦略性と事前知識をユーザーに要求するのは大げさだ、その間ぐらいの、ほどよく頭を使って、かつタッチインターフェースの良さを活かせるカードバトルというのを僕も前から考えていて、そこそこ考えた上で２週間コーディングして形になってきていたのですが、「パズル＆ドラゴンズ」をプレイして、自分が考えたバトルの仕立ての甘さにガッカリしました。やり直しです。

そんなこんなで時間があればついついプレイしてしまう「パズル＆ドラゴンズ」おすすめです！

あと僕も最近「Cat A Lot」というiOS/Androidのブロックゲームをリリースしたのでもしよければプレイしてください。

関連記事：
・trick7 – ゲームと情操教育てきなこと」
・trick7 – ゲームとのつき合い方」
・「自分が悪い」と思わせる | NIJIBOXブログ

画面にならぶパネルのうち、名称を覚えておくべきパネルは、オブジェクトを置く舞台となるステージ、コマ割りのようにアニメーションを設定するためのタイムライン、選択／描画／塗り／テキスト等のツールが並ぶツールバー、選択したオブジェクトの詳細情報を確認・設定できるプロパティパネル、ActionScriptを記述するアクションパネル、作成したシンボル（※後述）を一覧できるライブラリパネルです。

作ったFlashを実際にどう動くかをプレビューすることをパブリッシュするといいます。プレビューのショートカットは「Ctrl(Macはcommand) + Enter」です。パブリッシュすると、作業フォルダ（.flaファイルと同じ場所）SWFファイルができるという認識をしましょう。

タイムラインパネルは、Flashをパブリッシュプレビューすると、左から右方向へ再生されます。

横方向に並んでいる数字はフレーム数を表し、1秒間に12フレーム進むように設定されている場合は、1秒かけて12フレームまで移動します。

タイムラインは区切りを付けない限り、アニメーションしません。区切りをつける行為をキーフレーム化するといいます。

• フレームを伸ばす
• フレームを削除する
• キーフレームを作成する
• キーフレームを削除する

上の各行為をちゃんと理解しましょう。ショートカットキーもありますが、タイムライン上で右クリックすれば全て設定できますので、まずはこのやり方を覚えましょう。

タイムラインのフレームをドラッグして伸ばしたり区切ったりすることもできます。このとき、フレームの選択のしかたに癖があるので注意して慣れましょう。

タイムラインは、最終フレームまで再生されると、１フレーム目に戻り、延々と再生されます。これを止めたい場合はアクションパネルにActionScriptを書きます。例えば、指定のフレームに到達したら再生を止めたい場合はそのフレーム（キーフレーム）にstop();と記述します。

タイムラインパネルの縦方向はレイヤーを表します。Photoshopと同じく、上のレイヤーの方が、表示の重なりは上になります。

例えば人があるくアニメーションを作る時、Flashでは頭／手／足／胴／腰という感じにパーツ化して、各パーツに対して個別にアニメーション設定をするのが一般的です。
このパーツ化することをシンボル化するといいます。

シンボルの種類にはボタンシンボルとムービークリップシンボルとグラフィックシンボルいう３種類があります。
現在のPC用Flashではボタンシンボルは使いませんが、携帯用FlashLite1.1では使います。

シンボル化するには、ステージ上のシンボル化したいオブジェクトを選択した状態で修正>シンボルに変換…（ショートカットキーのF8キー）、または右クリックして「シンボルに変換..」できます。

シンボル化を意識せずに、トゥイーンアニメーション設定をすると、Flashが勝手にシンボル化してくれるようになっていますが、シンボル名が「トゥイーン１」といったふうに分かりにくいシンボルができるので避けましょう。

※新規に空っぽのシンボルを作って、その中にオブジェクトを描いていくアプローチもあります。

シンボル化すると、ライブラリウィンドウにシンボルとして登録され、表示されます。シンボルというのは、おおもとの概念だとイメージしましょう。例えばDogというシンボルをステージ上に３個作ることができますが、シンボルから生成したこの３つを、Dogシンボルのインスタンスと呼びます。この３個のインスタンスを個別に操作する必要があるので、それぞれを選択した状態でプロパティパネルからインスタンス名を設定します。

シンボルの中にも時間軸、つまりタイムラインが存在します。例えば、「部屋」をステージ上に作ったとして、そのステージ上に「時計」シンボルを用意し、その時計シンボルの中のタイムライン上で針を延々と動かせる、といった風に使います。
このように、シンボルの中に置かれたシンボルの内部でアニメーションが動いている、さらにそれが入れ子構造になって複雑なアニメーションを作ることができます。この入れ子構造を「シンボルの入れ子構造」といい、この入れ子構造が理解できればもうFlasherです。

シンボルの中のタイムラインを「時計シンボルのタイムライン」と呼び、対して、一番上にあたる「部屋」のタイムラインをルートのタイムラインと呼ぶのが通例です。

自分がシンボルの中身を見ているのか、ルートを見ているのかを確認するには、画面上部に表示されている階層表示を見ましょう。

アニメーションの設定は、タイムラインパネル上で区切り（キーフレーム）を作ることで実現できます。

１フレームごとにキーフレームを作って「コマ撮りアニメ」のようなこともできますが、Flashにはもう一つのアニメーションがあります。始点と終点を決めれば、中間の移動はFlashが自動的に補完してくれる「トゥイーンアニメーション」と呼ばれる手法です。

トゥイーンアニメーションを設定する場合も、タイムライン上で右クリックすれば設定できます。

滑らかに止まる演出をする場合は、プロパティパネルでトゥイーンのイージング設定してみましょう。

トゥイーンさせる時は、動かしたいものだけが１枚のレイヤー上に置いてあるようにしましょう。（他の物体が同じレイヤー上にあるとおかしくなります。）

ActionScriptについて

アクションパネルに記述します。（ショートカットキーはF9です）
行末に「;」を記述してもしなくてもOKですが、一応書くようにしましょう。
コメントアウト（SWF生成時には影響しない記述。備忘録やメモとして活用）する場合は「//１行コメント」や「/*複数行（改行）コメント*/」を使います。
スクリプトはタイムラインのフレームに書くフレームスクリプトと、ボタンに直接書くボタンスクリプトがあります。

フレームスクリプトを記述したフレームは、タイムライン上でaと表示されます。スクリプトだけを書くレイヤーを用意するのが通例です。

とりあえず覚えておいた方がいいコードとして

//タイムラインを止める
stop();

//指定のフレームに移動して、そこから再生
gotoAndPlay(5);

//シンボルに対して命令する
tellTarget("対象のインスタンス名"){
    //例：半透明にする
    _alpha = 50;
}

//ボタンスクリプト（エンターボタンを押すと実行）
on(keyPress "<enter>"){
    //例：5フレーム目に移動
	gotoAndPlay(5);
}
//ボタンスクリプト（携帯の５キーを押すと実行）
on(keyPress "5"){
    //例：5フレーム目に移動
	gotoAndPlay(5);
}

//重要！例：Flash内で定義した変数（hensuu）を確認する
trace(hensuu);

を覚えましょう。

シンボルの中からルートを操作したい時は、tellTarget(“/”){ （以下略）と指定します。

覚えておきたい基本操作

• ステージ上で、「Ctrl(Macはcommand)+Shift+拡大したい場所をドラッグ」でその部分だけ拡大表示できます。
• ステージ上のものをCtrl(Macはcommand)+Xでカットですが、ペーストはCtrl(Macはcommand)+Shift+Vで同位置ペーストです。なので、レイヤー分けを目的にオブジェクトを別のレイヤーにカット＆ペーストするときはShiftペーストです。
• ビットマップ画像を小数点の位置にレイアウトしてしまうと画像が荒れます。ただし、画像にスムージングをかければ荒れないようにできます
• パネルを誤って閉じたり、ドラッグして変な場所に移動してしまったのを戻したい。そういう時は「ウィンドウ＞ワークスペース＞初期設定」で、パネルのレイアウトを元に戻せます。

基本操作を網羅
「Flash Lite 1.1 の基本が分かる8つのポイント – 1ka2ka.com」

あわせておすすめ。ActionScriptを書き出したらきちんと全部読みましょう。
「これだけは知っておきたい「FlashLite入門」 || _level0.KAYAC」

余力あれば以下を読み進めましょう

Flashで使う画像は何形式にすればいいの？
「Flash Lite 1.1 のファイルサイズ(容量)を節約する９の方法」

「知らないと損をするよ！ 携帯Flash軽量化メモ 〜デザイン編〜 | _level0.KAYAC」

ここに気が回ればもう完璧、どんどん作ってー。
「携帯Flash　さらなる軽量化 | _level0.KAYAC」

最後に：
ざざっと書いたので「FlashLite1.1のはActionScriptじゃねーよ」とか、そういう細部は無視してください。
時間かけてちゃんと勉強したい人はやっぱり書籍がおすすめです。

FLASH Professional CS5　スーパートレーニング

（上から最近のお仕事）

ヤン極志（携帯ソーシャルゲーム）

http://nijibox.jp/yngk/
今年7月にmobageとgreeでリリースした「ヤンキー＋三国志」なカードゲーム。Flashを担当。
携帯ソーシャルゲームに最適なアニメーション演出からロジック実装、軽量化の工夫（＋超大量の作業）など、FlashLite1.1のことを広範囲に考えて作成しました。
携帯ソーシャルのFlashは、ゲームをインストールしたてのユーザーさんが「おっ！」って感じでパッと見で興味を持てる掴みと、以降は何度も繰り返してみることになる邪魔な存在になってしまうこととのジレンマを、気持ちのいいボタンスキップでストレスを減らしていく、そんなことを考えて作ってました。
この「ヤン極志」はじめ、そこからの横展開でできたゲーム「妖女大戦（ようじょたいせん）」と「レジェンドオブオーディン」もgree,mobageで公開中。

戦争ウォーズ（Yahoo!モバゲー）

http://yahoo-mbga.jp/game/12003225/detail
コミカルなドット絵の兵器ユニットをユニットコスト（10ポイント）を使ってユニット編成して、他ユーザーのユニットと戦ってエリア制圧していくPC用簡単タクティクスゲーム。
兵士から爆撃機まで、全８種類のユニットにはそれぞれ相性があるので、一概に強いユニット構成というのはなく、相手に応じた編成で勝ち進んでいくところにゲーム性があります。
このプロジェクトは企画とFlashモック作成をした状態で、僕はヤン極志に注力することになったので、社内メンバーさんといつもお世話になっている外部のFlasherさんに引き継がせてもらって、2011年8月リリース。そこから運用に関わらせてもらって現在も上り調子で公開中です。
下の「おしゃれ泥棒」同様、チュートリアルや画面上での説明やキャンペーン案内、操作導線等、企画〜操作の全フェーズでユーザーが迷わないよう案内することの大切さを学びました。

おしゃれ泥棒（Yahoo!モバゲー）

http://yahoo-mbga.jp/game/12003250/detail
去年7月、ひょんなことから企画制作することになった僕がはじめて携わったソーシャルゲーム。
まさか30過ぎたオッサンFlasherが作ったとは思えないであろう”女性向け洋服コレクションゲーム”ですが、そのゲーム内容は「他人の洋服をこっそり借り、相手にバレずに一定時間をやりすごせるとゲーム内通貨が稼げる」という、なぜかバトルゲーム。
Flashを作ってくれたのは、なんとClockmaker池田さん（Clockmakerブログでもバナー貼ってくださってました）なので、外見はカワイイ感じのゲームですが、裏は超絶AS実装。
去年10月にリリースしてからは矢継ぎ早にキャンペーンをしたり、洋服や機能を追加したり、問い合わせ対応、バナー作りまで、「リリースしてからが勝負」といわれるソーシャルゲームですが、それを実感いたしました。リリースから1年以上経ちましたが今も育ち続けているYahoo!モバゲーのゲーム。

これから

以上ソーシャルゲームを中心に1年やってきました。
ソーシャルゲームに携わり、いろいろ得るものもありましたが、一方で、新しいことを自分で0から勉強しつつ全部作ることへの憧れが再燃してきたこともあり、心機一転10月からはスマートフォンアプリの開発をしています。
CoronaSDKはじめました。CoronaSDK開発のレポートも含め、スマホ系のあれこれは、弊社ブログ「ニジボスマホ部」で書いています。

あと、CS3の時の.flaファイルをCS5で開いてパブリッシュしたら、フォント埋め込みのダイナミックフォントが一切表示されなくて焦った。
textField.embedFonts = true;
をコメントアウトすれば動くので、理由を探ったところ ActionScript 上の TextFormat インスタンスでのフォント指定文字列がCS5だと変わっていた。（※どうやらCS4から変わったらしい）
大重さんの「フォントの英語名を調べる – ActionScript 3.0入門ノート CS4」のエントリを見て英語名を調べて指定し直したところ、きちんとテキストが表示されるようになった。
※実は変更前も英語指定だったんだけど、なんか違う英語表記に変わっていた。

if(hoge){
panel.btn1.addEventListener(MouseEvent.CLICK, mouseDownHandler);
}else{
panel.gotoAndStop(2);
panel.btn2.addEventListener(MouseEvent.CLICK, mouseDownHandler);
}

要はフレーム移動直後に、その移動先フレームにのみ存在するボタンに対して addEventListener するケース。

FlashIDE上でのパブリッシュ設定が FlashPlayer10 の時は動くのに、FlashPlayer9 設定に切り替えると null エラーになる。

ビックリした。

ちなみに両フレームともにまたがるように配置されたボタンなら大丈夫、あくまでgotoAndStop移動後に初登場のオブジェクトに対してイベント付けた時に起こる。

link: flashゲーム作成記 | Box2Dを簡単に扱えるようにするGravity2D

ということで、5年前くらいの AirMac Express、僕みたいに突然電源入らなくなることがあるかもです。

アップルコンピュータ AirMac Express ベースステーション with Air Tunes MB321J/A

往路は富士宮ルート、復路は御殿場ルート。

会社の富士登山経験者のご意見やウェブサイトを見たりして、かつできるだけ持ち物を少なくしようと心がけて現在リュックに入っている持ち物をリストアップ。

• ハンドタオル2枚
• ヒートテックの長袖シャツ
• ヒートテックのタイツ
• 薄手のダウンジャケット
• 防水のナイロンジャケット
• パンツ1枚
• 靴下2枚（重ねて履く予定）
• 軍手1セット
• マスク
• ハンカチ2枚
• ヘッドライト
• バンドエイド５枚
• ウェットティッシュ10枚入り
• 日焼け止め
• ジップロック2枚
• スーパーのレジ袋2枚
• 歯ブラシ
• 糸ようじ1本
• ボールペン
• iPhone
• docomo携帯
• 水1.5リットル
• クリーム玄米ブラン3袋
• デジカメ(FinePix F10)
• 1dayコンタクト2セット

当日着ているもの

• 半袖シャツ
• 防水ナイロンパンツ
• パンツ
• 靴下
• ブーツ
• ハーフパンツ
• ブリーズライト（鼻のやつ）

天気とこないだギックリ腰になったのが不安。

ほぼCMみたいなオープニングの動画のあと、コンテンツが始まります。アンジェラベイビーさんの縦長全身写真レイヤーの上に、コンテンツレイヤーが重なっている二層構造になっていますが、手前と奥のレイヤーでスクロール移動速度を変えることで奥行き感・移動の気持ち良さを表現。

余談だけど、髪のCMで髪が奇麗すぎて艶が波紋のようになる映像、男の僕からするとCGすぎてシュール。そういや誇大広告を避けるためでしょうか、洗顔フォームCMの汚れが毛穴から追い出されるイメージアニメで、毎回ちょっとだけ汚れが残るのが、いつも、いつも、ずっと、ずっと気になって生きてきました。

このサイト（yossyさんのサンプルだったっけ？）の見せ方も同様に二層のレイヤーの移動量を変える事で奥行き表現。

ということで

• 奥行きに意味を持たせる使い方（奥に常時表示させたいものを置くとか）
• 手前と奥の移動量の違いによる演出（浅めor深め）
• 平行に重なってるんじゃなくって、傾斜して重なってたらどんなだろう。気持ち悪いかなぁ
• 二層以上重ねて面白い事できるかな

みたいなことを考える機会が持てました。

ヴィダルサスーン｜FASHION, MUSIC, VIDAL SASSOON

via jehmlich + matthes mikysec: racer

場所とモノヅクリのスキルがあるとこういうことができる。
※ちなみに運転をブラウザ側で体験させるサイトもありましたね。

場所がなくてもこういうことができる。

どちらもウェブであまねく多くの人々に！ではなく、うちうちで楽しむために作られていて、Web上では「才能の無駄遣い」という褒められ方をするのだけど、今の時代、こういうことが個人レベルでできるようになってきてるので、ほんとにワクワクする。ドムぐらいなら僕でも動かせる。