Skip to content
tickle edited this page Jan 17, 2024 · 25 revisions

English | Japanese

| < オブジェクト一覧 | オブジェクト構成・ボタン | 疑似フレーム処理仕様 > |

オブジェクト構成・ボタン

Dancing☆Onigiri(CW Edition)では、
基本的にJavaScriptでDOMと呼ばれるオブジェクト構成を操作しています。

いくつかコアとなるオブジェクト(スプライト)があるので、
それを押さえることでイメージがつきやすくなるかもしれません。

例えばソース内において、全てのオブジェクトは「divRoot」という
1つのオブジェクト(スプライト)の上に乗っているので、
「divRoot」上のオブジェクトを全て消せば、画面をクリアしたこととほぼ同じです。
(関数で言うと、clearWindow()が同じことをやっています)

タイトル画面 (titleInit)

dom1

「divRoot」というオブジェクトの上に、背景矢印があり、
その上に背景モーションが入ります。
ボタンを隠したい場合、その上のマスクモーションを使用します。

主なボタン

ボタン 機能
Click Here! 設定・オプション画面へ移行します。
Maker:XXX 製作者のページへリンクします。(別窓)
Artist:XXX アーティストさんのページへリンクします。(別窓)
©2018 ティックル, CW Ver... このGitHubのページへリンクします。(別窓)

設定・オプション画面 (optionInit)

dom2

「divRoot」の上の階層の「optionSprite」が出てきました。
「optionSprite」上には、Difficultyなどの設定項目や、それに対応するボタンが乗っかります。
オプション表示項目だけデザインを変える、といったことができるようになっています。

主なボタン

ボタン 機能
Back タイトル画面へ戻ります。
KeyConfig キーコンフィグ画面へ移動します。
Play 今の設定でゲームを開始します。

キーコンフィグ画面 (keyconfigInit)

dom5

設定・オプション画面と構成は同じです。
サンプルとなるステップゾーンやカーソルが上の階層である「keyconSprite」に乗っています。

主なボタン

ボタン 機能
Back 設定・オプション画面へ戻ります。
"<<" もしくは ">>" 同一キーで別パターンがある場合、それを表示します。
Reset キーの割り当てを元の状態に戻します。

読込画面 (loadingScoreInit)

dom1

ここもタイトルと同じです。
ただし、ここは計算が終わるとすぐにメイン画面に飛んでしまうため、
画面としての位置づけは無いに等しいです。

メイン画面 (mainInit)

dom3

画面内で最もDOMを使っている箇所です。
backSprite/mainSprite/infoSprite/judgeSprite/maskSpriteは上下関係があり、
mainSpriteの中で作られたオブジェクトはinfoSpriteのいずれのオブジェクトよりも
上に来ることはありません。
これを利用して、infoSprite上に前面に表示したいオブジェクトを置くこともできます。

また、これらのオブジェクトは独立しているため、
それぞれの位置・座標を変えたり、
そのオブジェクトだけアルファを掛けるといったことができます。

ステップゾーン

arrow_tree

ステップゾーンは本体(stepj)と空押し部分(stepDivj)、矢印がヒットしたときのモーション(stepHitj)の3つの組み合わせで構成されています。
(jは矢印番号で、左から右、上から下の順で0から順に数字が割り振られます。)
ヒットモーション(stepHitj)は普段は隠れていますが、矢印とステップゾーンが重なったときに表示されます。

矢印

arrow

矢印は単純に1つのオブジェクト(arrowj_k)のみです。
jは矢印番号、kはその矢印が何番目の矢印かを表します。

フリーズアロー

frzarrow

フリーズアローは開始矢印(本体・塗り)、帯、終了矢印(本体・塗り)で構成されます。
ヒット時(押しっぱなし時)は開始矢印(本体)が隠れ、開始矢印(塗り)が白色に変化します。

結果画面 (resultInit)

dom4

タイトル画面と構成はほぼ同じです。

主なボタン

ボタン 機能
Back タイトル画面へ戻ります。
CopyResult 結果内容をクリップボードへコピーします。
Tweet 結果内容をTwitter用に加工して、ツイート画面を表示します。
Gitter Twitterの代わりに投稿可能なGitterを別タブで表示します。
Retry もう一度同じ設定でプレイします。

| < オブジェクト一覧 | オブジェクト構成・ボタン | 疑似フレーム処理仕様 > |

English | Japanese

How To Play
(プレイ方法)

How To Make
(作り方、移行方法)

How To Upgrade? / What's New?
(本体の更新方法、更新情報)

Specification (for creators)
(仕様・製作者向け)

Specification (for developers)
(仕様・開発者向け)

Tips
(用途別対処方法)

Repository Local Rules
(リポジトリルール・管理者向け)

Others
(その他)

Clone this wiki locally