dos e0008 styleData - cwtickle/danoniplus GitHub Wiki
English | Japanese
| < 背景・マスクモーション | スキン変更 | 矢印・フリーズアローモーション > |
- 画面内のスキンに関する部分の色やスタイルを変更します。
- 3つで1セット。改行区切りです。
|style_data=
0,--background,-45deg:#993399:#000000:#993333
|
|styletitle_data=
100,--title-star,#9999ff
300,--background,#999999
500,--title-star,#ff9999
|
|styleresult_data=
0,--background,135deg:#339933:#000000:#999933
|
|stylefailedS_data=
0,--background,45deg:#339999:#000000:#999933
|
番号 | 論理名 | 設定例 | 内容 |
---|---|---|---|
1 | Frame | 200 | 変更するタイミングのフレーム数を指定します。 |
2 | CSS-CustomProperty | --background | CSSのカスタムプロパティ名を指定します。 |
3 | Style | -45deg:#993399:#000000:#993333 | 適用するスタイルを指定します。 グラデーション指定も使えます。 |
|style_data=
0,--background,-45deg:#993399:#000000:#993333
700,--main-stepDefault,--background
|
番号 | 論理名 | 設定例 | 内容 |
---|---|---|---|
1 | Frame | 200 | 変更するタイミングのフレーム数を指定します。 |
2 | CSS-CustomProperty | --background | 設定するCSSのカスタムプロパティ名を指定します。 |
3 | CSS-CustomProperty(Reference) | --common-ii | 引用元のCSSカスタムプロパティ名を指定します。 |
|styletitle_data=
0,<コメントを入力>
|
番号 | 論理名 | 設定例 | 内容 |
---|---|---|---|
1 | Frame | 200 | フレーム数指定。指定は任意です。 |
2 | Comment | <演出開始> | コメント文を自由に入力できます。 |
|styleCross_data=styleRev_data|
番号 | 論理名 | 設定例 | 内容 |
---|---|---|---|
1 | Data Name | styleRev_data | コピー元のスキン変更のデータ名を指定します。 |
- 背景・マスクモーションと同じような指定が可能です。
- タイトル・メイン・リザルトで設定が分かれています。言語別も可能です。
画面 | スキン変更 (言語未指定) |
スキン変更 (日本語) |
スキン変更 (英語) |
---|---|---|---|
タイトル | styletitle_data | styletitleJa_data | styletitleEn_data |
メイン(通常) | style_data, style2_data, ... |
styleJa_data, styleJa2_data, ... |
styleEn_data, styleEn2_data, ... |
メイン(リバース) | styleRev_data, styleRev2_data, ... |
styleRevJa_data, styleRevJa2_data, ... |
styleRevEn_data, styleRevEn2_data, ... |
メイン(Cross, Split 他) | styleAlt_data, styleAlt2_data, ... styleCross_data, styleFlat_data, ... |
styleAltJa_data, styleAltJa2_data, ... styleCrossJa_data, styleFlatJa_data, ... |
styleAltEn_data, styleAltEn2_data, ... styleCrossEn_data, styleFlatEn_data, ... |
リザルト(クリア時) | styleresult_data styleresult2_data ... |
styleresultJa_data styleresultJa2_data ... |
styleresultEn_data styleresultEn2_data ... |
リザルト(途中終了時) | stylefailedS_data stylefailedS2_data ... |
stylefailedSJa_data stylefailedSJa2_data ... |
stylefailedSEn_data stylefailedSEn2_data ... |
リザルト(ノルマ失敗時) | stylefailedB_data stylefailedB2_data ... |
stylefailedBJa_data stylefailedBJa2_data ... |
stylefailedBEn_data stylefailedBEn2_data ... |
画面 | スキン変更 (言語未指定) |
スキン変更 (日本語) |
スキン変更 (英語) |
---|---|---|---|
メイン(通常) | styleA_data, styleA2_data, ... |
styleAJa_data, styleAJa2_data, ... |
styleAEn_data, styleAEn2_data, ... |
メイン(リバース) | styleRevA_data, styleRevA2_data, ... |
styleRevAJa_data, styleRevAJa2_data, ... |
styleRevAEn_data, styleRevAEn2_data, ... |
メイン(Cross, Split 他) | styleAltA_data, styleAltA2_data, ... styleCrossA_data, styleFlatA_data, ... |
styleAltAJa_data, styleAltAJa2_data, ... styleCrossAJa_data, styleFlatAJa_data, ... |
styleAltAEn_data, styleAltAEn2_data, ... styleCrossAEn_data, styleFlatAEn_data, ... |
- タイトル以外のスキン変更については指定が無い場合、
例えば 2譜面目のリザルト(ノルマ失敗時) については以下の順で適用されます。
適用順 | 適用モーション | 意味 |
---|---|---|
1 | stylefailedBJa2_data stylefailedBEn2_data |
リザルト(ノルマ失敗時)の2譜面目 ※言語指定あり |
2 | stylefailedBJa_data stylefailedBEn_data |
リザルト(ノルマ失敗時)の1譜面目 ※言語指定あり |
3 | stylefailedB2_data | リザルト(ノルマ失敗時)の2譜面目 |
4 | stylefailedB_data | リザルト(ノルマ失敗時)の1譜面目 |
5 | styleresultJa2_data styleresultEn2_data |
リザルト(クリア時)の2譜面目 ※言語指定あり |
6 | styleresultJa_data styleresultEn_data |
リザルト(クリア時)の1譜面目 ※言語指定あり |
7 | styleresult2_data | リザルト(クリア時)の2譜面目 |
8 | styleresult_data | リザルト(クリア時)の1譜面目 |
- ver34.0.0より、キー別・パターン別の指定が可能になりました。
|transKey9A=$$9B$9C|
|style_data=...| // 全体共通
|style2_data=...| // 2譜面目共通
|styleEn2_data=...| // 2譜面目、英語モードのみ適用
|styleAEn2_data=...| // 2譜面目、英語モード、別キーモード(9B, 9C)のみ適用
|style<9C>En2_data=...| // 2譜面目、英語モード、別キーモード(9C)のみ適用
|style<9A>En2_data=...| // 2譜面目、英語モード、別キーモード外のみ適用
|style[2]En2_data=...| // 2譜面目、英語モード、キーパターン:2のみ適用
- コメントアウトしている変数も利用可能です。
- 初期値は別の設定値で上書きされるよう、コメントアウトしています。
- 各変数(CSSカスタムプロパティ)の意味についてはスキンファイル仕様をご覧ください。
- 末尾が
-x
のものはグラデーション指定ができません。
:root {
/* 背景 */
--background: linear-gradient(#000000, #222222);
/* --back-chartDetail: var(--background); */
/* --back-difListL: var(--background); */
/* --back-difListR: var(--back-difListL, var(--background)); */
/* タイトル共通色 */
--title-base: #cccccc;
/* 画面タイトル色 */
--title-dancing: #6666ff;
--title-onigiri: #ff6666;
--title-star: #ffff66;
--title-display: #ffff66;
/* タイトルサイズ */
--title-siz-x: 40px;
/* 設定別ヘッダー */
--settings-difficulty-x: #ff9999;
--settings-speed-x: #ffff99;
--settings-motion-x: #eeff99;
--settings-scroll-x: #ddff99;
--settings-shuffle-x: #99ff99;
--settings-autoPlay-x: #99ffbb;
--settings-gauge-x: #99ffdd;
--settings-adjustment-x: #99ffff;
--settings-fadein-x: #99eeff;
--settings-volume-x: #99ddff;
--settings-appearance-x: #cc99ff;
--settings-opacity-x: #ee99ff;
--settings-hitPosition-x: #ff99ff;
/* 譜面選択部分背景 */
--settings-difSelector: #111111;
/* 設定無効化時 */
--settings-disabled-x: #666666;
/* フェードインバー */
--settings-fadeinBar-x: #ffffff;
/* ゲージ表示 (可変) */
--settings-lifeVal-x: #ff9966;
/* ゲージ設定枠 */
--settings-bc-gaugeTable: #666666;
--settings-slice-gaugeTable-x: 1;
--settings-border-gaugeTable-x: 1px;
/* キーコンフィグ関連 */
--keyconfig-warning-x: #ffff99;
--keyconfig-imgType-x: #99ddff;
--keyconfig-colorType-x: #ffdd99;
--keyconfig-changekey-x: #ffff00;
--keyconfig-defaultkey-x: #99ccff;
/* 判定 */
--common-ii: #66ffff;
--common-shakin: #99ff99;
--common-matari: #ff9966;
--common-shobon: #ccccff;
--common-uwan: #ff9999;
--common-kita: #ffff99;
--common-iknai: #99ff66;
--common-combo: #ffffff;
--common-score-x: #ffffff;
/* --common-comboJ: var(--common-kita); */
/* --common-comboFJ: var(--common-ii); */
/* --common-diffFast: var(--common-matari); */
/* --common-diffSlow: var(--common-shobon); */
/* --common-estAdj: var(--common-shakin); */
/* --common-excessive: var(--common-kita); */
/* ステップゾーン */
--main-stepKeyDown: #66ffff;
--main-stepDefault: #999999;
--main-stepDummy: #777777;
--main-stepIi: var(--common-ii);
--main-stepShakin: var(--common-shakin);
--main-stepMatari: var(--common-matari);
--main-stepShobon: var(--common-shobon);
--main-stepExcessive: #ffff99;
--main-objStepShadow: #000000;
--main-objFrzShadow: #000000;
--main-frzHitTop: #ffffff;
/* ライフゲージ */
--life-max: #444400;
--life-cleared: #004444;
--life-failed: #444444;
/* ライフゲージ本体 */
--life-background: #222222;
--life-bg-border: #555555;
--life-color-border-x: #cccccc;
/* 結果画面 */
--result-lbl-x: #999999;
--result-style-x: #cccccc;
--result-bc-playwindow: #666666;
--result-slice-playwindow-x: 1;
--result-border-playwindow-x: 1px;
--result-score-x: #ffffff;
--result-scoreHiBracket-x: #999999;
--result-scoreHi-x: #cccccc;
--result-scoreHiPlus-x: #ffff99;
--result-noRecord-x: #999999;
--result-allPerfect: #ffffff;
--result-perfect: #ffffcc;
--result-fullCombo: #66ffff;
--result-cleared: #ffff66;
--result-failed: #ff6666;
/* 結果画面のCleared/Failedを表示している文字のサイズ */
--result-siz-window-x: 80px;
/* ボタン */
/* Click Here */
--button-bg-start: #333333;
--button-color-start-x: #ffffff;
--button-bgHover-start: #666666;
--button-colorHover-start-x: #ffffff;
/* 汎用 */
--button-bg-default: #111111;
--button-color-default-x: #ffffff;
--button-bgHover-default: #666666;
--button-colorHover-default-x: #ffffff;
/* 汎用(背景が透明) */
--button-bg-defaultNo: #00000000;
--button-bgHover-defaultNo: #666666;
/* 設定用ミニボタン */
--button-bg-mini: #333333;
--button-color-mini-x: #ffffff;
--button-bgHover-mini: #999900;
--button-colorHover-mini-x: #ffffff;
/* 戻るボタン */
--button-bg-back: #111133;
--button-color-back-x: #cccccc;
--button-bgHover-back: #000099;
--button-colorHover-back-x: #cccccc;
/* 設定ボタン */
--button-bg-setting: #333311;
--button-color-setting-x: #ffffff;
--button-bgHover-setting: #999900;
--button-colorHover-setting-x: #ffffff;
/* 開始ボタン */
--button-bg-next: #331111;
--button-color-next-x: #ffffff;
--button-bgHover-next: #990000;
--button-colorHover-next-x: #ffffff;
/* リセットボタン */
--button-bg-reset: #113311;
--button-color-reset-x: #ffffff;
--button-bgHover-reset: #009900;
--button-colorHover-reset-x: #ffffff;
/* 外部SNSボタン */
--button-bg-sns: #113333;
--button-color-sns-x: #ffffff;
--button-bgHover-sns: #009999;
--button-colorHover-sns-x: #ffffff;
/* ON/OFFボタン */
--button-color-off-x: #666666;
--button-border-off-x: #000000 #333333;
--button-color-on-x: #ffffff;
--button-border-on-x: #000000 #cccccc;
/* ON/OFFボタン Reverse用 */
--button-color-offRev-x: #cccccc;
--button-border-offRev-x: #000000 #999999;
--button-color-onRev-x: #ffffff;
--button-border-onRev-x: #000000 #ddff99;
/* ON/OFFボタン 無効時 */
--button-bg-offDisabled: #333333;
--button-color-offDisabled-x: #999999;
--button-bg-onDisabled: #009999;
--button-color-onDisabled-x: #ffffff;
}
- デフォルトスキンで背景色を変更するには、下記のように
canvas
タグが含まれない形にする必要があります。 - ver10以降のhtmlテンプレートでは
canvas
タグが含まれない形になっているため問題は起こりませんが、
ver9以前のテンプレートを流用している場合はご注意ください。
<div id="canvas-frame">
<!-- <canvas id="layer0" width="600" height="500"></canvas> コメントアウト -->
<!-- <canvas id="layer1" width="600" height="500"></canvas> コメントアウト -->
</div>
- 共通化の影響で外せない場合、ver33.3.0以降の場合は bgCanvasUse を
false
に設定すれば対処可能です。 - それ以前のバージョンの場合、デフォルトスキンを変更することで対処します。
/skin
フォルダにある「danoni_skin_default.css」をコピーして「danoni_skin_default_add.css」を作成してください。
その上で、作品ページ内の譜面の中に|skinType=default_add|
を指定すれば反映されるようになります。
Version | 変更内容 |
---|---|
v34.0.0 | ・他譜面のデータを参照しつつ、個別のスキン設定を組み合わせる機能を追加 ・キー別、キーパターン別のスキン設定を実装 |
v33.0.0 | ・初回実装 |
| < 背景・マスクモーション | スキン変更 | 矢印・フリーズアローモーション > |