Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[0398/empty-sprite] 空スプライト作成処理を新関数に置き換え #1038

Merged
merged 2 commits into from Apr 3, 2021
Merged

[0398/empty-sprite] 空スプライト作成処理を新関数に置き換え #1038

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9170354
[0398/empty-sprite:0.1.0] 空スプライト作成処理を新関数に置き換え
cwtickle Apr 2, 2021
a7092da
[0398/empty-sprite:0.1.1] changeStyleのフォントサイズ初期値を取り止め
cwtickle Apr 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
167 changes: 92 additions & 75 deletions js/danoni_main.js
View file
Open in desktop
Expand Up @@ -34,7 +34,7 @@ let g_localVersion2 = ``;
* ⇒　各画面に Init がついたものが画面の基本構成(ルート)を表す。
*
* ▽ スプライトの親子関係
* 基本的にdiv要素で管理。最下層を[divRoot]とし、createSprite()でdiv子要素を作成。
* 基本的にdiv要素で管理。最下層を[divRoot]とし、createEmptySprite()でdiv子要素を作成。
* clearWindow()で[divRoot]以外の全てのスプライトを削除。
* 特定のスプライトに限り削除する場合は deleteChildspriteAll() 。
*/
Expand Down Expand Up @@ -653,6 +653,7 @@ function createColorObject2(_id,
* 空スプライト(ムービークリップ相当)の作成
* - 作成済みの場合はすでに作成済のスプライトを返却する
* - ここで作成したスプライトは clearWindow() により削除される
* @deprecated v21以降非推奨
* @param {string} _parentObjName 親スプライト名
* @param {string} _newObjName 作成する子スプライト名
* @param {number} _x 作成するスプライトのx座標（親スプライト基準）
Expand All @@ -674,15 +675,40 @@ function createSprite(_parentObjName, _newObjName, _x, _y, _width, _height, _opt
return newsprite;
}

/**
* 空スプライト(ムービークリップ相当)の作成
* - 作成済みの場合はすでに作成済のスプライトを返却する
* @param {object} _parentObj 親スプライト
* @param {string} _newObjId 作成する子スプライト名
* @param {object} _obj (x, y, w, h, ...rest)
* @param {...any} _classes
* @returns
*/
function createEmptySprite(_parentObj, _newObjId, { x = 0, y = 0, w = g_sWidth, h = g_sHeight, title = ``, ...rest } = {}, ..._classes) {
if (document.getElementById(_newObjId) !== null) {
changeStyle(_newObjId, { x, y, w, h, title, ...rest });
return document.getElementById(_newObjId);
}
const div = createDiv(_newObjId, x, y, w, h);
div.classList.add(..._classes);
div.title = title;

const style = div.style;
Object.keys(rest).forEach(property => style[property] = rest[property]);
_parentObj.appendChild(div);

return div;
}

/**
* 階層スプライト（全体）の作成
* @param {string} _baseName
* @param {number} _num
*/
function createMultipleSprite(_baseName, _num) {
const sprite = createSprite(`divRoot`, `${_baseName}`, 0, 0, g_sWidth, g_sHeight);
const sprite = createEmptySprite(divRoot, `${_baseName}`);
for (let j = 0; j <= _num; j++) {
createSprite(_baseName, `${_baseName}${j}`, 0, 0, g_sWidth, g_sHeight);
createEmptySprite(sprite, `${_baseName}${j}`);
}
return sprite;
}
Expand Down Expand Up @@ -1171,17 +1197,8 @@ function initialControl() {
setVal($id(`canvas-frame`).width, 600, C_TYP_FLOAT), setVal($id(`canvas-frame`).height, 500, C_TYP_FLOAT)
];

let divRoot;
if (document.querySelector(`#divRoot`) === null) {
const stage = document.querySelector(`#canvas-frame`);
divRoot = createDiv(`divRoot`, 0, 0, g_sWidth, g_sHeight);
stage.style.margin = `auto`;
stage.style.letterSpacing = `normal`;
stage.appendChild(divRoot);
clearWindow();
} else {
divRoot = document.querySelector(`#divRoot`);
}
const stage = document.querySelector(`#canvas-frame`);
const divRoot = createEmptySprite(stage, `divRoot`, { margin: `auto`, letterSpacing: `normal` });

// 背景の表示
if (document.querySelector(`#layer0`) !== null) {
Expand All @@ -1193,8 +1210,7 @@ function initialControl() {
l0ctx.fillStyle = grd;
l0ctx.fillRect(0, 0, g_sWidth, g_sHeight);
} else {
const divBack = createSprite(`divRoot`, `divBack`, 0, 0, g_sWidth, g_sHeight);
divBack.style.background = `linear-gradient(#000000, #222222)`;
createEmptySprite(divRoot, `divBack`, { background: `linear-gradient(#000000, #222222)` });
}

// Now Loadingを表示
Expand Down Expand Up @@ -1417,9 +1433,9 @@ function initAfterDosLoaded() {
// CSSファイル内のbackgroundを取得するために再描画
if (document.querySelector(`#layer0`) === null) {
divRoot.removeChild(document.querySelector(`#divBack`));
createSprite(`divRoot`, `divBack`, 0, 0, g_sWidth, g_sHeight);
createEmptySprite(divRoot, `divBack`);
} else if (g_headerObj.skinType !== `default` && !g_headerObj.customBackUse) {
createSprite(`divRoot`, `divBack`, 0, 0, g_sWidth, g_sHeight);
createEmptySprite(divRoot, `divBack`);
}

// CSSファイルの読み込み
Expand Down Expand Up @@ -1843,8 +1859,7 @@ function loadMusic() {
request.addEventListener(`load`, _ => {
if (request.status >= 200 && request.status < 300) {
const blobUrl = URL.createObjectURL(request.response);
const loader = createSprite(`divRoot`, `loader`, 0, g_sHeight - 10, g_sWidth, 10);
loader.style.backgroundColor = `#333333`;
createEmptySprite(divRoot, `loader`, { y: g_sHeight - 10, h: 10, backgroundColor: `#333333` });
lblLoading.textContent = g_lblNameObj.pleaseWait;
setAudio(blobUrl);
} else {
Expand All @@ -1858,9 +1873,7 @@ function loadMusic() {

if (_event.lengthComputable) {
const rate = _event.loaded / _event.total;
const loader = createSprite(`divRoot`, `loader`, 0, g_sHeight - 10, g_sWidth, 10);
loader.style.width = `${g_sWidth * rate}px`;
loader.style.backgroundColor = `#eeeeee`;
createEmptySprite(divRoot, `loader`, { y: g_sHeight - 10, h: 10, w: g_sWidth * rate, backgroundColor: `#eeeeee` });
lblLoading.textContent = `${g_lblNameObj.nowLoading} ${Math.floor(rate * 100)}%`;
} else {
lblLoading.textContent = `${g_lblNameObj.nowLoading} ${_event.loaded}Bytes`;
Expand Down Expand Up @@ -1988,11 +2001,11 @@ function drawDefaultBackImage(_key) {
l0ctx.fillRect(0, 0, g_sWidth, g_sHeight);

if (g_headerObj.skinType !== `default`) {
createSprite(`divRoot`, `divBack`, 0, 0, g_sWidth, g_sHeight);
createEmptySprite(divRoot, `divBack`);
}
}
} else {
createSprite(`divRoot`, `divBack`, 0, 0, g_sWidth, g_sHeight);
createEmptySprite(divRoot, `divBack`);
}
}

Expand Down Expand Up @@ -3831,7 +3844,7 @@ function optionInit() {
divRoot.appendChild(getTitleDivLabel(`lblTitle`, g_lblNameObj.settings, 0, 15, `settings_Title`));

// オプションボタン用の設置
createOptionWindow(`divRoot`);
createOptionWindow(divRoot);

// ユーザカスタムイベント(初期)
if (typeof customOptionInit === C_TYP_FUNCTION) {
Expand Down Expand Up @@ -3888,9 +3901,10 @@ function setSpriteList(_settingList) {
const childY = 20;
const spriteList = [];
_settingList.forEach(setting => {
spriteList[setting[0]] = createSprite(`optionsprite`, `${setting[0]}Sprite`,
childX, setting[1] * C_LEN_SETLBL_HEIGHT + childY + setting[2],
optionWidth + setting[3], C_LEN_SETLBL_HEIGHT + setting[4], { description: g_msgObj[setting[0]] });
spriteList[setting[0]] = createEmptySprite(optionsprite, `${setting[0]}Sprite`, {
x: childX, y: setting[1] * C_LEN_SETLBL_HEIGHT + childY + setting[2],
w: optionWidth + setting[3], h: C_LEN_SETLBL_HEIGHT + setting[4], title: g_msgObj[setting[0]],
});
});
return spriteList;
}
Expand All @@ -3903,7 +3917,9 @@ function createOptionWindow(_sprite) {

// 各ボタン用のスプライトを作成
const optionWidth = (g_sWidth - 450) / 2;
const optionsprite = createSprite(_sprite, `optionsprite`, optionWidth, 65 + (g_sHeight - 500) / 2, 450, 325);
const optionsprite = createEmptySprite(_sprite, `optionsprite`, {
x: optionWidth, y: 65 + (g_sHeight - 500) / 2, w: 450, h: 325,
});

// 設定名、縦位置、縦位置差分、幅差分、高さ差分
const settingList = [
Expand Down Expand Up @@ -4003,13 +4019,10 @@ function createOptionWindow(_sprite) {
const createDifWindow = (_key = ``) => {
g_currentPage = `difSelector`;
setShortcutEvent(g_currentPage);
const difList = createSprite(`optionsprite`, `difList`, 165, 65, 280, 255);
difList.style.overflow = `auto`;
difList.classList.toggle(g_cssObj.settings_DifSelector, true);
const difCover = createSprite(`optionsprite`, `difCover`, 25, 65, 140, 255);
difCover.style.overflow = `auto`;
difCover.classList.toggle(g_cssObj.settings_DifSelector, true);
difCover.style.opacity = 0.95;
const difList = createEmptySprite(optionsprite, `difList`, { x: 165, y: 65, w: 280, h: 255, overflow: `auto` }, g_cssObj.settings_DifSelector);
const difCover = createEmptySprite(optionsprite, `difCover`, {
x: 25, y: 65, w: 140, h: 255, overflow: `auto`, opacity: 0.95
}, g_cssObj.settings_DifSelector);

// リスト再作成
makeDifList(difList, _key);
Expand Down Expand Up @@ -4105,9 +4118,9 @@ function createOptionWindow(_sprite) {
);
g_stateObj.scoreDetailViewFlg = false;

const scoreDetail = createSprite(`optionsprite`, `scoreDetail`, 20, 90, 420, 230);
scoreDetail.classList.add(g_cssObj.settings_DifSelector);
scoreDetail.style.visibility = `hidden`;
const scoreDetail = createEmptySprite(optionsprite, `scoreDetail`, {
x: 20, y: 90, w: 420, h: 230, visibility: `hidden`,
}, g_cssObj.settings_DifSelector);
const viewScText = _ => createScText(lnkScoreDetail, `ScoreDetail`, { targetLabel: `lnkScoreDetail`, x: -10 });
multiAppend(scoreDetail,
createScoreDetail(`Speed`),
Expand All @@ -4133,7 +4146,7 @@ function createOptionWindow(_sprite) {
* @param {boolean} _graphUseFlg
*/
function createScoreDetail(_name, _graphUseFlg = true) {
const detailObj = createSprite(`scoreDetail`, `detail${_name}`, 0, 0, 420, 230);
const detailObj = createEmptySprite(scoreDetail, `detail${_name}`, { w: 420, h: 230, visibility: `hidden` });

if (_graphUseFlg) {
const graphObj = document.createElement(`canvas`);
Expand All @@ -4151,7 +4164,6 @@ function createOptionWindow(_sprite) {

detailObj.appendChild(graphObj);
}
detailObj.style.visibility = `hidden`;

return detailObj;
}
Expand Down Expand Up @@ -5100,7 +5112,7 @@ function settingsDisplayInit() {
divRoot.appendChild(getTitleDivLabel(`lblTitle`, g_lblNameObj.display, 0, 15, `settings_Display`));

// オプションボタン用の設置
createSettingsDisplayWindow(`divRoot`);
createSettingsDisplayWindow(divRoot);

// ショートカットキーメッセージ
divRoot.appendChild(
Expand Down Expand Up @@ -5142,7 +5154,7 @@ function createSettingsDisplayWindow(_sprite) {
const optionWidth = (g_sWidth - 450) / 2;
const childX = 25;
const childY = 20;
createSprite(_sprite, `optionsprite`, optionWidth, 65 + (g_sHeight - 500) / 2, 450, 325);
createEmptySprite(_sprite, `optionsprite`, { x: optionWidth, y: 65 + (g_sHeight - 500) / 2, w: 450, h: 325 });

// 設定名、縦位置、縦位置差分、幅差分、高さ差分
const settingList = [
Expand All @@ -5151,11 +5163,12 @@ function createSettingsDisplayWindow(_sprite) {
];

// 設定毎に個別のスプライトを作成し、その中にラベル・ボタン類を配置
const displaySprite = createSprite(`optionsprite`, `displaySprite`, childX, childY + 10,
optionWidth, C_LEN_SETLBL_HEIGHT * 5);
const displaySprite = createEmptySprite(optionsprite, `displaySprite`, {
x: childX, y: childY + 10, w: optionWidth, h: C_LEN_SETLBL_HEIGHT * 5,
});
const spriteList = setSpriteList(settingList);

document.querySelector(`#${_sprite}`).appendChild(
_sprite.appendChild(
createDivCss2Label(`sdDesc`, g_lblNameObj.sdDesc, {
x: 0, y: 65, w: g_sWidth, h: 20, siz: C_SIZ_MAIN,
})
Expand Down Expand Up @@ -5302,7 +5315,7 @@ function keyConfigInit(_kcType = g_kcType) {
);

// キーの一覧を表示
const keyconSprite = createSprite(`divRoot`, `keyconSprite`, 0, 100 + (g_sHeight - 500) / 2, g_sWidth, 300);
const keyconSprite = createEmptySprite(divRoot, `keyconSprite`, { y: 100 + (g_sHeight - 500) / 2, h: 300 });
const keyCtrlPtn = `${g_keyObj.currentKey}_${g_keyObj.currentPtn}`;
const keyNum = g_keyObj[`chara${keyCtrlPtn}`].length;
const posMax = (g_keyObj[`divMax${keyCtrlPtn}`] !== undefined ?
Expand Down Expand Up @@ -7284,14 +7297,15 @@ function MainInit() {
createMultipleSprite(`backSprite`, g_scoreObj.backMaxDepth);

// ステップゾーン、矢印のメインスプライトを作成
const mainSprite = createSprite(`divRoot`, `mainSprite`, g_headerObj.playingX, g_posObj.stepY - C_STEP_Y, g_headerObj.playingWidth, g_sHeight);
mainSprite.style.transform = `scale(${g_keyObj.scale})`;
const mainSprite = createEmptySprite(divRoot, `mainSprite`, {
x: g_headerObj.playingX, y: g_posObj.stepY - C_STEP_Y, w: g_headerObj.playingWidth, transform: `scale(${g_keyObj.scale})`,
});

// 曲情報・判定カウント用スプライトを作成（メインスプライトより上位）
const infoSprite = createSprite(`divRoot`, `infoSprite`, g_headerObj.playingX, 0, g_headerObj.playingWidth, g_sHeight);
const infoSprite = createEmptySprite(divRoot, `infoSprite`, { x: g_headerObj.playingX, w: g_headerObj.playingWidth });

// 判定系スプライトを作成（メインスプライトより上位）
const judgeSprite = createSprite(`divRoot`, `judgeSprite`, g_headerObj.playingX, 0, g_headerObj.playingWidth, g_sHeight);
const judgeSprite = createEmptySprite(divRoot, `judgeSprite`, { x: g_headerObj.playingX, w: g_headerObj.playingWidth });

const keyCtrlPtn = `${g_keyObj.currentKey}_${g_keyObj.currentPtn}`;
const keyNum = g_keyObj[`chara${keyCtrlPtn}`].length;
Expand Down Expand Up @@ -7327,10 +7341,10 @@ function MainInit() {
const colorPos = g_keyObj[`color${keyCtrlPtn}`][j];

// ステップゾーンルート
const stepRoot = createSprite(`mainSprite`, `stepRoot${j}`,
g_workObj.stepX[j],
C_STEP_Y + g_posObj.reverseStepY * g_workObj.dividePos[j],
C_ARW_WIDTH, C_ARW_WIDTH);
const stepRoot = createEmptySprite(mainSprite, `stepRoot${j}`, {
x: g_workObj.stepX[j], y: C_STEP_Y + g_posObj.reverseStepY * g_workObj.dividePos[j],
w: C_ARW_WIDTH, h: C_ARW_WIDTH,
});

// 矢印の内側を塗りつぶすか否か
if (g_headerObj.setShadowColor[colorPos] !== ``) {
Expand Down Expand Up @@ -7407,8 +7421,8 @@ function MainInit() {

// 矢印・フリーズアロー描画スプライト（ステップゾーンの上に配置）
const arrowSprite = [
createSprite(`mainSprite`, `arrowSprite0`, 0, 0, g_headerObj.playingWidth, g_posObj.arrowHeight),
createSprite(`mainSprite`, `arrowSprite1`, 0, 0, g_headerObj.playingWidth, g_posObj.arrowHeight)
createEmptySprite(mainSprite, `arrowSprite0`, { w: g_headerObj.playingWidth, h: g_posObj.arrowHeight }),
createEmptySprite(mainSprite, `arrowSprite1`, { w: g_headerObj.playingWidth, h: g_posObj.arrowHeight }),
];

// Appearanceのオプション適用時は一部描画を隠す
Expand All @@ -7418,11 +7432,10 @@ function MainInit() {
for (let j = 0; j < keyNum; j++) {

// フリーズアローヒット部分
const frzHit = createSprite(`mainSprite`, `frzHit${j}`,
g_workObj.stepX[j], C_STEP_Y + g_posObj.reverseStepY * g_workObj.dividePos[j],
C_ARW_WIDTH, C_ARW_WIDTH);
frzHit.style.opacity = 0;

const frzHit = createEmptySprite(mainSprite, `frzHit${j}`, {
x: g_workObj.stepX[j], y: C_STEP_Y + g_posObj.reverseStepY * g_workObj.dividePos[j],
w: C_ARW_WIDTH, h: C_ARW_WIDTH, opacity: 0,
});
if (isNaN(parseFloat(g_workObj.arrowRtn[j]))) {
multiAppend(frzHit,
createColorObject2(`frzHitShadow${j}`, {
Expand Down Expand Up @@ -7574,15 +7587,14 @@ function MainInit() {
}

// 歌詞表示
createSprite(`judgeSprite`, `wordSprite`, 0, 0, g_headerObj.playingWidth, g_sHeight);
const wordSprite = createEmptySprite(judgeSprite, `wordSprite`, { w: g_headerObj.playingWidth });
for (let j = 0; j <= g_scoreObj.wordMaxDepth; j++) {
const wordY = (j % 2 === 0 ? 10 : (g_headerObj.bottomWordSetFlg ? g_posObj.distY + 10 : g_sHeight - 60));
const lblWord = createSprite(`wordSprite`, `lblword${j}`, 100, wordY, g_headerObj.playingWidth - 200, 50);
changeStyle(`lblword${j}`, {
wordSprite.appendChild(createDivCss2Label(`lblword${j}`, ``, {
x: 100, y: wordY, w: g_headerObj.playingWidth - 200, h: 50,
siz: C_SIZ_MAIN, align: C_ALIGN_LEFT, color: `#ffffff`, fontFamily: getBasicFont(),
display: `block`, margin: `auto`,
})
lblWord.textContent = ``;
}));
}

const jdgGroups = [`J`, `FJ`];
Expand Down Expand Up @@ -8050,8 +8062,9 @@ function MainInit() {
const arrowName = `${_name}${_j}_${_arrowCnt}`;
const firstPosY = C_STEP_Y + g_posObj.reverseStepY * dividePos + g_workObj.initY[g_scoreObj.frameNum] * boostSpdDir;

const stepRoot = createSprite(`arrowSprite${dividePos}`, arrowName,
g_workObj.stepX[_j], firstPosY, C_ARW_WIDTH, C_ARW_WIDTH);
const stepRoot = createEmptySprite(arrowSprite[dividePos], arrowName, {
x: g_workObj.stepX[_j], y: firstPosY, w: C_ARW_WIDTH, h: C_ARW_WIDTH,
});
g_attrObj[arrowName] = {
cnt: g_workObj.arrivalFrame[g_scoreObj.frameNum] + 1,
boostCnt: g_workObj.motionFrame[g_scoreObj.frameNum],
Expand Down Expand Up @@ -8127,8 +8140,9 @@ function MainInit() {
const firstPosY = C_STEP_Y + g_posObj.reverseStepY * dividePos + g_workObj.initY[g_scoreObj.frameNum] * boostSpdDir;
const firstBarLength = g_workObj[`mk${toCapitalize(_name)}Length`][_j][(_arrowCnt - 1) * 2] * g_workObj.boostSpd;

const frzRoot = createSprite(`arrowSprite${dividePos}`, frzName,
g_workObj.stepX[_j], firstPosY, C_ARW_WIDTH, C_ARW_WIDTH + firstBarLength);
const frzRoot = createEmptySprite(arrowSprite[dividePos], frzName, {
x: g_workObj.stepX[_j], y: firstPosY, w: C_ARW_WIDTH, h: C_ARW_WIDTH + firstBarLength,
});
g_attrObj[frzName] = {
cnt: g_workObj.arrivalFrame[g_scoreObj.frameNum] + 1,
boostCnt: g_workObj.motionFrame[g_scoreObj.frameNum],
Expand Down Expand Up @@ -9107,9 +9121,12 @@ function resultInit() {
// タイトル文字描画
divRoot.appendChild(getTitleDivLabel(`lblTitle`, g_lblNameObj.result, 0, 15, `settings_Title`));

const playDataWindow = createSprite(`divRoot`, `playDataWindow`, g_sWidth / 2 - 225, 70 + (g_sHeight - 500) / 2, 450, 110);
playDataWindow.classList.add(g_cssObj.result_PlayDataWindow);
const resultWindow = createSprite(`divRoot`, `resultWindow`, g_sWidth / 2 - 200, 185 + (g_sHeight - 500) / 2, 400, 210);
const playDataWindow = createEmptySprite(divRoot, `playDataWindow`, {
x: g_sWidth / 2 - 225, y: 70 + (g_sHeight - 500) / 2, w: 450, h: 110,
}, g_cssObj.result_PlayDataWindow);
const resultWindow = createEmptySprite(divRoot, `resultWindow`, {
x: g_sWidth / 2 - 200, y: 185 + (g_sHeight - 500) / 2, w: 400, h: 210,
});

const playingArrows = g_resultObj.ii + g_resultObj.shakin +
g_resultObj.matari + g_resultObj.shobon + g_resultObj.uwan +
Expand Down