FRAMEZ の街は、敵を倒した所から動き出す

OVERVIEW作品の概要

作品名

FRAMEZ

ジャンル

ベルトスクロールアクション（ひとりで本編／チュートリアル／2人のオンライン協力・BETA）

中身

デザイナー3人（KEI・BRUNO・RIN）× 4つの街区（それぞれに中ボスとボス）× 難易度3段（EASY・NORMAL・HARD）

操作

PCはキーボード（移動は矢印キーか WASD、攻撃 Z・ジャンプ X・ダッシュ C・必殺 V）。スマホは縦向きで、ゲーム画面の下の左半分がスティック、右に4つのボタン

技術

Canvas 2D（960×720）・Web Audio・PeerJS 1.5.5（WebRTC。オンライン協力を開いたときだけ読みこむ）

サーバー

ファイルを配信するだけ。オンライン協力の入室の仲介だけ PeerJS の公開サーバーを使う

制作

AMIX（企画・キャラクター・デザイン・プログラム。BGM と効果音の一部は Audiostock、残りの効果音は Web Audio でその場で合成）

FRAMEZ で遊ぶ→ゲームの紹介ページ→

01 — PLAN最後の敵を倒した所から、街に色が戻る

ゲームを開いて最初の画面をタップすると、英語の文字が跳ねて流れる16秒ほどのオープニングが始まります。つぶれて、のびて、弧を描いて動いていた街を、一時停止マークの顔をした男が止め、4つの街区は彼の手下に押さえられた。動けるのは3人のデザイナーだけ、という筋書きです。字幕つきで、タイトルから何度でも見直せます。

4つの街区は、どれも3つの場面に分かれています。敵の群れが来る場面が2つ（2つ目の途中で中ボスが出る）、最後の場面にボス。戦っているあいだ、背景の街は止まった絵のままで、上から街区ごとの色の膜をかけて沈ませてあります。その場面の最後の敵を倒すと、倒れた位置から色の輪が広がり、輪の内側だけ街が動き出します。空に鳥が飛び、ビルの看板の絵が動き、歩道の人が歩く。輪は1.3秒ほどで画面の端まで届き、CLEAR の文字と一緒に体力が少し戻ります。

背景は、止まった版と動いている版の2枚を描き分けています。場面の途中はカメラが止まるので、建物や道路のように動かない部分は1度だけ画像に焼いて使い回し、輪が広がるあいだは、輪の形で切り抜いた範囲にだけ動く街を重ねる。輪の位置は最後に倒した敵の位置なので、同じ場面でも、どこで決着をつけたかで色の広がり方が変わります。

最後の1人を倒したときや、カウンターが決まったとき、ボスを倒したときには、画面がほんの数コマだけ黄色一色になり、キャラクターが黒い影絵で描かれます。コードの中でインパクトフレームと名付けている演出で、続けて出ないように間隔をあけ、動きを減らす設定にしている端末では出しません。

02 — MOTION敵の名前もランクの名前も、動きの用語

敵の名前は、キーフレームの補間やイージングの用語から取りました。数が最も多い、まっすぐ向かってくる敵が LINEAR、素早く2回続けて殴ってくるのが STEPPED、大きくて硬く、攻撃中は軽い攻撃でひるまないのが HOLD。離れて弾を撃つ TWEEN、跳ねながら近づく BOUNCE、棒を振り回す SPLINE、一気に間合いを詰める SNAP と、名前の意味と動き方がそろっています。敵は全部で11種類です。

画面右上のスタイルランクも同じ発想で、STEP・EASE・SMOOTH・ELASTIC・OVERSHOOT の5段。いまのランクの色は、ゲーム画面の外側の光にも映ります。練習用のダミーは骨と関節だけのアニメーションのリグの姿で、関節はキーフレームの菱形。必殺技のゲージはタイムラインに見立て、満タンの位置にキーフレームが打たれています。ボスの攻撃には、画面を横切る赤い再生ヘッドもあります。

ゲーム画面は960×720の4:3で、ブラウザの大きさに合わせて拡大し、余った外側を作業台のような暗い面にしています。点の方眼、四隅のトンボ、見当合わせの十字の印、FRAMEZ_comp という名前と、プレイ中に進むタイムコード。鳴っている曲の位置とテンポから拍を割り出し、拍ごとに画面の外へ四角い枠が広がっていきます。殴られた瞬間は、外側の光がピンクに変わります。

タイトルのロゴの登場も、アニメーションの原則どおりの順番で動かしました。小さくつぶれて力をため、弧を描いて飛びこみながら縦にのび、残像を3枚引いて、着地でつぶれ、少し行き過ぎてから戻る。そのあとは小さく揺れ続け、ときどきロゴの形をなぞって光が走る。

KEI は足払いとダッシュパンチでつなぐ万能型、BRUNO は敵をつかんで投げる力自慢、RIN は敵をすり抜けながら切る俊足。必殺技は KEYFRAME RUSH（画面中の敵へ連続で飛びこむ）、QUAKE（画面全体に衝撃波）、TIME BLUR（敵の時間だけを遅くする）の3つです。

03 — STYLE同じ連打は、敵に読まれる

攻撃ボタンを連打していれば先へ進めてしまうと、技の種類がいくらあっても使われません。FRAMEZ は、各デザイナーの基本の連続攻撃を出すたびに数を1つ足し、打ち上げやダッシュ攻撃、溜め攻撃、投げなどほかの技を出すと4つ引いています。この数が13に届くと、画面に赤い帯で LOOP DETECTED と出ます。

読まれているあいだ、基本の連続攻撃の威力は半分になり、正面の敵は55％の確率で構えて受け止めます。ほかの技を混ぜて数が5まで下がれば LOOP BROKEN と出て、スタイルの点も入る。連打をやめさせるために禁止するのではなく、混ぜたほうが得になるように数字を置いた形です。

スタイルランクの点も、同じ技を2回続けると2回目は6割しか入らず、殴られると4割まで減ります。同じ技ばかりでは、ランクはなかなか上がりません。

敵の攻撃には、拳に縮んでいく輪が出ます。輪が小さくなりきる直前にダッシュするとジャスト回避で、画面がゆっくりになり、デザイナーの周りに残像が8つ広がる。そのスロー中に攻撃すれば、敵の背後へ回りこむカウンターです。輪が点線ならフェイント。ボスの攻撃も同じ輪で読めるので、ザコ戦で覚えた合図がそのままボス戦で使えます。

ボスを壁際で殴り続けて攻撃させない戦い方には、対策があります。ボスが長いあいだ攻撃を出せずにいると、衝撃波で振りほどいて画面の中央側へ戻り、すぐ反撃してくる。必殺技のゲージは、自分の必殺技の最中には貯まりません。敵の時間を遅くする TIME BLUR の間に殴り放題でゲージを満たし、すぐ次の必殺技を出せてしまうのを防ぐためです。

04 — TUTORIAL時間を止めて、1つずつ試させる

タイトルから入るチュートリアルは、ワイヤーの方眼が広がる練習用の部屋で進みます。移動、連続攻撃、打ち上げ、空中攻撃、選んだデザイナーだけの技（KEI は足払い、BRUNO はつかみ投げ、RIN はダイブキック）、ダッシュ、バックステップ、ジャスト回避、カウンター、溜め攻撃、ガード崩し、拾って投げる、必殺技の13ステップ。各ステップの前には時間が止まって説明のカードが出て、ボタンを押すと動き出します。

1回できるごとに GOOD!、決められた回数をこなすと、速くできたほど上の言葉で PERFECT!・GREAT!・NICE! と出ます。うまくいかないステップは、画面の「このステップを飛ばす」から先へ。

操作の受け付け方は、遊んで確かめながら何度か変えています。上を押しながら攻撃で打ち上げる技は、上を押したままだと奥へ歩いてしまうため、上を軽く押して離してから殴る人が多く、タイミングが厳しいという声が出た。そこで、攻撃を押す直前の8コマ（約0.13秒）以内に上か下を押していれば、上・下の技として受け付ける形にしました。

バックステップも作り直しました。初めは方向を入れずにダッシュするとバックステップでしたが、デザイナーは自動で敵のほうを向くので、ダッシュだけ押すと敵から離れてしまう。方向なしのダッシュは前へ、バックステップは後ろとダッシュを一緒に押したときだけにして、さらに前に敵がいるときに限りました。ジャスト回避の直後に攻撃を押すとダッシュ攻撃が出てしまい、カウンターが出にくかった点も、カウンターを優先する形に直しています。

公開した日の夜には、スマホでスティックが最後の向きのまま固まる不具合が見つかりました。iPhone のアドレスバーが出入りして操作の枠が動くと、指を動かしていないのにずれが残り、指を離した合図を取りこぼすと押し直しも受け付けなくなっていた。基準点を画面の座標で持ち、操作の枠の外で指を離しても拾い、指が離れるたびに残った操作を確かめて離す形に直しました。

05 — SOUND効果音の大きさを、出口で測ってそろえる

試作の段階では、BGM も効果音もすべて Web Audio の合成音でした。公開の準備で、オープニング、タイトル、チュートリアル、4つの街区、ボス戦、最後のボス戦、ステージクリア、ゲームオーバー、エンディングの12曲を Audiostock の曲に替え、打撃・カウンター・爆発・ジャンプ・被弾などの効果音も素材に置きかえました。空振りや着地、ダッシュ、決定の音などは合成音のままです。

組み合わせて鳴らしてみると、音の大きさがばらばらでした。素材と合成音のすべてを、最後の出口で同じ測り方で測ると、最も大きい壁への叩きつけの合成音が −12.9dB、最も小さい空振りが −49.3dB で、36dBも開いていた。音の名前ごとに補正の値を持たせ、爆発や決め技のような大きな一撃は −20〜−21dB、弱い打撃や被弾は −22〜−27dB、何度も鳴る空振りやジャンプ、着地は −28〜−32dB の帯に収めています。吹き飛んだ敵がほかの敵に当たったときの連鎖の音は、鳴らさないことにしました。

オープニングも、最初は音なしで自動で流れていました。ブラウザは、ページを1度タップかクリックするまで音を出させないためです。読み込みのあとに TAP TO START の画面を挟み、そのタップでオープニングを音つきで始める形にして、音の ON・OFF もこの画面で選べるようにしました。

曲は2〜3分あり、まるごと音のデータとして展開すると1曲50〜60MBになるため、HTML の audio 要素を2本使ってつないでいます。くり返しの終わりの1.2秒前から、控えの1本を同じ位置で音を出さずに鳴らして歩調を合わせ、終わりの瞬間に0.08秒で入れ替える。4つの街区の道中の曲は、公開の翌日に別の4曲へ差し替えました。

06 — ONLINE入力だけを送って、2台で同じ計算をする

FRAMEZ のゲームの計算は、画面のコマ数に関係なく、必ず1/60秒刻みで進みます。敵の動きなどゲームの判断に使う乱数は、種から同じ並びを作れるものだけ。プレイヤーの操作は、1コマごとに左右・上下・押しっぱなしのボタン・押した瞬間のボタンを4ビットずつ、16ビットの数1つにまとめています。同じ種と同じ入力の列があれば、どの端末でも同じ展開になる作りです。

公開の翌日に足したオンライン協力（BETA）は、この作りの上に載せました。2台はお互いの入力だけを、3コマ先の分として送り合い、両方の画面で同じ計算をする。相手の入力が届いていないコマでは「相手を待っています…」と出して待ちます。60コマごとに、全員の位置や体力、敵、スコアからまとめた指紋を交換し、食い違えば2人ともタイトルへ戻る。協力を公開する前に、Chromium と WebKit で同じ入力の列を4分流し、1人でも2人でも最後まで同じ指紋になることを確かめました。

2人で遊ぶときの決まりも足しています。デザイナーは別々で、スコアとランクは2人で1つ。必殺技は同時に1人だけで、敵は近いほうのプレイヤーを狙う。体力が0になると HELP! と出て倒れたまま待ち、相方がそばで攻撃ボタンを1.5秒押し続けると起こせます。起こした側は、自分の体力の半分を渡します。自分の体力が最大の2割を切っていれば起こせず、2人とも倒れたらゲームオーバー。助けるほど自分が危うくなるので、起こすかどうかがその場の判断になります。

通信の部品は しろくろテニス！のものを写し、ID の頭と受け取るデータの検査表を差しかえました。PeerJS はオンラインの画面を開いたときにだけ読みこみ、プレイヤーの名前は送りません。検証はヘッドレスのブラウザ2台で、招待URLでの入室、3人目の入室、仲介サーバーとの接続切れ、片方が別の画面へ移ったとき、コンティニューの選択までを通しています。

07 — DATA公開からの1か月で、82本中9位

FRAMEZ は2026年10月15日の夜に公開しました。DATA CENTRAL の公開データから、割合と順位、倍率だけを取り出しています。

FRAMEZ — PLAY DATA

集計：AMIX GAMES DATA CENTRAL（2026年11月12日までの値）

9位月間の閲覧順位・82本中（10月14日〜11月12日）

50％9〜15時に遊ばれた割合（11月6日〜12日）

1.8倍平日1日あたりと、週末1日あたりの比（10月16日〜11月12日・10月30日と祝日の11月3日を除く）

83％PC で遊ばれた割合（11月6日〜12日）

遊ばれた時間帯1時間ごとの割合・2026年11月6日〜12日

端末11月6日〜12日

• PC83％
• タブレット13％
• スマホ4％

来た元11月6日〜12日

• AMIX の中（一覧など）89％
• 直接（ブックマーク等）10％
• 検索1％
• SNS0％

計測は Cloudflare Web Analytics（ページの表示を数える仕組み）。数えているのはゲームのページ（/tl/tool-g-framez/）を開いた回数で、遊んだ時間やクリアの数は含みません。「直接」はほかのページを経ずに開かれたもの。順位は、web- で始まる一覧のページを除いて数えています。四捨五入のため、合計が100％にならないことがあります。

月間の閲覧順位は82本中9位（10月14日〜11月12日）。集計の期間が、公開した日からの1か月とほぼ重なっています。直近の1週間に絞ると71本中20位（11月6日〜12日）でした。

来た元は89％が AMIX GAMES の一覧などサイトの中から、直接開かれたのが10％で、検索からは1％。時間帯は9時台から14時台の6時間に50％が集まり、山は13時台の9.3％、夜の19〜22時は合わせて14％。平日1日あたりの閲覧は週末の約1.8倍です（10月16日〜11月12日。値の粗い10月30日と、祝日の11月3日を除いて数えています）。

端末は PC が83％、タブレットが13％、スマホが4％。スマホでは縦向きの画面の上に4:3のゲーム画面を置き、その下にスティックとボタンを並べる作りですが、開かれているのはほとんどが PC とタブレットでした。

08 — PERSPECTIVE題材の用語を、そのまま部品の名前にする

名前と動きを一致させて、見分ける手間を減らす

FRAMEZ では、モーションデザインの用語を敵、ランク、ゲージ、画面の外側の飾りにまで割り当てました。名前と動き方が一致していれば、SNAP は間合いを詰め、TWEEN は離れて撃つ、と遊ぶ人が自分で結びつけていけます。工場の工程や印刷の用語、ある町の通りの名前のように、企画の題材が持っている言葉を部品の名前に置く方法は、ほかの題材にもそのまま使えます。

点数の表示より、画面が変わることを手応えにする

敵を倒し終えたときに増えるのは点数だけでなく、色の戻った街の範囲です。商店街や観光地の地図を最初は止まった絵で描き、遊ぶほど色と人の動きが戻っていく形にすれば、進み具合が画面そのものに残る。FRAMEZ は同じ街をコードで2通りに描き分けていますが、手描きの絵で作るなら、背景を止まった版と動いている版の2通り用意することになります。

2人で遊ぶなら、同じ計算になる作りを先に決める

入力だけを送り合う協力は、ゲーム用のサーバーを置かずに作れます。ただしそのためには、計算の刻みと乱数を最初から決まった作りにしておく必要があり、ずれが出たときは試合を止めるしかありません。展示会のように止まると困る場所や、賞品や順位を懸ける企画なら、判定をサーバーで持つ設計と、その費用を検討することになる。題材選びから通信の設計までを一から作る場合は法人向けブラウザゲーム開発・制作のページで、公開中の作品の中に企業が入る形はブラウザゲームのタイアップ・ゲーム内広告のご提案のページで案内しています。