Skip to content

Commit 753685f

Browse files
author
Hardy--Lee
committed
feat: add resolution settings
1 parent 7fbb973 commit 753685f

13 files changed

Lines changed: 219 additions & 210 deletions

File tree

‎packages/webgal/index.html‎

Lines changed: 0 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,6 @@
1313
<!--快速显示落地页，让用户感知不到加载的过程-->
1414
<div id="ebg"></div>
1515
<div id="Title_enter_page" onclick="enter()" style="
16-
width: 2560px;
17-
height: 1440px;
1816
overflow: hidden;
1917
position: absolute;
2018
top: 0;
@@ -89,114 +87,6 @@
8987
</div>
9088
<div id="panic-overlay"> <!-- 紧急回避 --> </div>
9189
<div id="root"></div>
92-
<script>
93-
/**
94-
* 在窗口大小改变时进行强制缩放
95-
*/
96-
const ua = navigator.userAgent;
97-
const isIOSDevice = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
98-
function resize() {
99-
const targetHeight = 1440;
100-
const targetWidth = 2560;
101-
102-
const h = window.innerHeight; // 窗口高度
103-
const w = window.innerWidth; // 窗口宽度
104-
const zoomH = h / targetHeight; // 以窗口高度为基准的变换比
105-
const zoomW = w / targetWidth; // 以窗口宽度为基准的变换比
106-
const zoomH2 = w / targetHeight; // 竖屏时以窗口高度为基础的变换比
107-
const zoomW2 = h / targetWidth; // 竖屏时以窗口宽度为基础的变换比
108-
let mh = (targetHeight - h) / 2; // y轴移动距离
109-
let mw = (targetWidth - w) / 2; // x轴移动距离
110-
let mh2os = targetWidth / 2 - w / 2; // 竖屏时 y轴移动距离
111-
let mw2os = targetHeight / 2 - h / 2; // 竖屏时 x轴移动距离
112-
let transform = '';
113-
let ebgTransform = '';
114-
const root = document.getElementById('root'); // 获取根元素
115-
const title = document.getElementById('Title_enter_page');
116-
const ebg = document.getElementById('ebg');
117-
const elements = [root, title];
118-
if (w > h) {
119-
const ebg = document.getElementById('ebg');
120-
if (ebg) {
121-
ebg.style.height = `100vh`;
122-
ebg.style.width = `100vw`;
123-
ebgTransform = '';
124-
}
125-
mw = -mw;
126-
mh = -mh;
127-
if (w * (9 / 16) >= h) {
128-
transform = `translate(${mw}px, ${mh}px) scale(${zoomH},${zoomH})`;
129-
}
130-
if (w * (9 / 16) < h) {
131-
transform = `translate(${mw}px, ${mh}px) scale(${zoomW},${zoomW})`;
132-
}
133-
} else {
134-
/**
135-
* 旋转
136-
*/
137-
if (ebg) {
138-
ebg.style.height = `${targetHeight}px`;
139-
ebg.style.width = `${targetWidth}px`;
140-
}
141-
mw2os = -mw2os;
142-
if (h * (9 / 16) >= w) {
143-
ebgTransform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomH2 * 1.75},${zoomH2 * 1.75})`;
144-
transform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomH2},${zoomH2})`;
145-
}
146-
if (h * (9 / 16) < w) {
147-
ebgTransform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomW2 * 1.75},${zoomW2 * 1.75})`;
148-
transform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomW2},${zoomW2})`;
149-
}
150-
/**
151-
* iOS 不强制旋转
152-
*/
153-
if (isIOSDevice) {
154-
const zoomWi = w / targetWidth;
155-
transform = `translate(${-mw}px, ${-mh}px) scale(${zoomWi},${zoomWi})`
156-
}
157-
}
158-
if (ebg) {
159-
ebg.style.transform = ebgTransform;
160-
}
161-
for (const element of elements) {
162-
if (element) {
163-
element.style.transform = transform;
164-
}
165-
}
166-
}
167-
168-
if (!isIOSDevice) {
169-
// 创建一个新的 meta 标签
170-
const meta = document.createElement('meta');
171-
meta.name = "viewport";
172-
meta.content = "width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no";
173-
// 将该标签添加到 head 中
174-
document.getElementsByTagName('head')[0].appendChild(meta);
175-
resize();
176-
window.onload = resize;
177-
window.onresize = resize;
178-
// 监听键盘 F11 事件，全屏时触发页面调整
179-
document.onkeydown = function (event) {
180-
const e = event;
181-
if (e && e.key === 'F11') {
182-
setTimeout(() => {
183-
resize();
184-
}, 100);
185-
}
186-
};
187-
} else {
188-
// ios
189-
const meta = document.createElement('meta');
190-
meta.name = "viewport";
191-
meta.content = "width=device-width, initial-scale=0.22, minimum-scale=0.01, maximum-scale=1";
192-
document.getElementsByTagName('head')[0].appendChild(meta);
193-
const style = document.createElement('style');
194-
style.type = 'text/css';
195-
style.textContent = '* { font-synthesis: none !important; }';
196-
document.head.appendChild(style);
197-
}
198-
199-
</script>
20090
<script>
20191
/**
20292
* 注册 Service Worker

‎packages/webgal/src/Core/controller/stage/pixi/PixiController.ts‎

Lines changed: 119 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { logger } from '@/Core/util/logger';
88
import { isIOS } from '@/Core/initializeScript';
99
import { WebGALPixiContainer } from '@/Core/controller/stage/pixi/WebGALPixiContainer';
1010
import { WebGAL } from '@/Core/WebGAL';
11-
import { SCREEN_CONSTANTS } from '@/Core/util/constants';
1211
import { addSpineBgImpl, addSpineFigureImpl } from '@/Core/controller/stage/pixi/spine';
1312
// import { figureCash } from '@/Core/gameScripts/vocal/conentsCash'; // 如果要使用 Live2D，取消这里的注释
1413
// import { Live2DModel, SoundManager } from 'pixi-live2d-display-webgal'; // 如果要使用 Live2D，取消这里的注释
@@ -79,8 +78,8 @@ export default class PixiStage {
7978
public notUpdateBacklogEffects = false;
8079
public readonly figureContainer: PIXI.Container;
8180
public figureObjects: Array<IStageObject> = [];
82-
public stageWidth = SCREEN_CONSTANTS.width;
83-
public stageHeight = SCREEN_CONSTANTS.height;
81+
public stageWidth = WebGAL.canvasWidth;
82+
public stageHeight = WebGAL.canvasHeight;
8483
public assetLoader = new PIXI.Loader();
8584
public readonly backgroundContainer: PIXI.Container;
8685
public backgroundObjects: Array<IStageObject> = [];
@@ -133,6 +132,7 @@ export default class PixiStage {
133132
app.renderer.autoResize = true;
134133
const appRoot = document.getElementById('root');
135134
if (appRoot) {
135+
this.setRootSize(document);
136136
app.renderer.resize(appRoot.clientWidth, appRoot.clientHeight);
137137
}
138138
if (isIOS) {
@@ -167,6 +167,122 @@ export default class PixiStage {
167167
this.initialize().then(() => {});
168168
}
169169

170+
private setRootSize(document: Document) {
171+
/**
172+
* 在窗口大小改变时进行强制缩放
173+
*/
174+
const ua = navigator.userAgent;
175+
const isIOSDevice = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
176+
function resize() {
177+
const targetHeight = WebGAL.canvasHeight;
178+
const targetWidth = WebGAL.canvasWidth;
179+
180+
const h = window.innerHeight; // 窗口高度
181+
const w = window.innerWidth; // 窗口宽度
182+
const zoomH = h / targetHeight; // 以窗口高度为基准的变换比
183+
const zoomW = w / targetWidth; // 以窗口宽度为基准的变换比
184+
const zoomH2 = w / targetHeight; // 竖屏时以窗口高度为基础的变换比
185+
const zoomW2 = h / targetWidth; // 竖屏时以窗口宽度为基础的变换比
186+
let mh = (targetHeight - h) / 2; // y轴移动距离
187+
let mw = (targetWidth - w) / 2; // x轴移动距离
188+
let mh2os = targetWidth / 2 - w / 2; // 竖屏时 y轴移动距离
189+
let mw2os = targetHeight / 2 - h / 2; // 竖屏时 x轴移动距离
190+
let transform = '';
191+
let ebgTransform = '';
192+
const root = document.getElementById('root'); // 获取根元素
193+
const title = document.getElementById('Title_enter_page');
194+
const ebg = document.getElementById('ebg');
195+
const elements = [root, title];
196+
if (root) {
197+
root.style.width = `${targetWidth}px`;
198+
root.style.height = `${targetHeight}px`;
199+
}
200+
if (title) {
201+
title.style.width = `${targetWidth}px`;
202+
title.style.height = `${targetHeight}px`;
203+
}
204+
if (w > h) {
205+
const ebg = document.getElementById('ebg');
206+
if (ebg) {
207+
ebg.style.height = `100vh`;
208+
ebg.style.width = `100vw`;
209+
ebgTransform = '';
210+
}
211+
mw = -mw;
212+
mh = -mh;
213+
if (w * (targetHeight / targetWidth) >= h) {
214+
transform = `translate(${mw}px, ${mh}px) scale(${zoomH},${zoomH})`;
215+
}
216+
if (w * (targetHeight / targetWidth) < h) {
217+
transform = `translate(${mw}px, ${mh}px) scale(${zoomW},${zoomW})`;
218+
}
219+
} else {
220+
/**
221+
* 旋转
222+
*/
223+
if (ebg) {
224+
ebg.style.height = `${targetHeight}px`;
225+
ebg.style.width = `${targetWidth}px`;
226+
}
227+
mw2os = -mw2os;
228+
if (h * (targetHeight / targetWidth) >= w) {
229+
ebgTransform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomH2 * 1.75},${zoomH2 * 1.75})`;
230+
transform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomH2},${zoomH2})`;
231+
}
232+
if (h * (targetHeight / targetWidth) < w) {
233+
ebgTransform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomW2 * 1.75},${zoomW2 * 1.75})`;
234+
transform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomW2},${zoomW2})`;
235+
}
236+
/**
237+
* iOS 不强制旋转
238+
*/
239+
if (isIOSDevice) {
240+
const zoomWi = w / targetWidth;
241+
transform = `translate(${-mw}px, ${-mh}px) scale(${zoomWi},${zoomWi})`
242+
}
243+
}
244+
if (ebg) {
245+
ebg.style.transform = ebgTransform;
246+
}
247+
for (const element of elements) {
248+
if (element) {
249+
element.style.transform = transform;
250+
}
251+
}
252+
}
253+
254+
if (!isIOSDevice) {
255+
// 创建一个新的 meta 标签
256+
const meta = document.createElement('meta');
257+
meta.name = "viewport";
258+
meta.content = "width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no";
259+
// 将该标签添加到 head 中
260+
document.getElementsByTagName('head')[0].appendChild(meta);
261+
resize();
262+
window.onload = resize;
263+
window.onresize = resize;
264+
// 监听键盘 F11 事件，全屏时触发页面调整
265+
document.onkeydown = function (event) {
266+
const e = event;
267+
if (e && e.key === 'F11') {
268+
setTimeout(() => {
269+
resize();
270+
}, 100);
271+
}
272+
};
273+
} else {
274+
// ios
275+
const meta = document.createElement('meta');
276+
meta.name = "viewport";
277+
meta.content = "width=device-width, initial-scale=0.22, minimum-scale=0.01, maximum-scale=1";
278+
document.getElementsByTagName('head')[0].appendChild(meta);
279+
const style = document.createElement('style');
280+
style.type = 'text/css';
281+
style.textContent = '* { font-synthesis: none !important; }';
282+
document.head.appendChild(style);
283+
}
284+
}
285+
170286
public getFigureObjects() {
171287
return this.figureObjects;
172288
}

‎packages/webgal/src/Core/gameScripts/pixi/performs/cherryBlossoms.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import * as PIXI from 'pixi.js';
22
import { registerPerform } from '@/Core/util/pixiPerformManager/pixiPerformManager';
33

44
import { WebGAL } from '@/Core/WebGAL';
5-
import { SCREEN_CONSTANTS } from '@/Core/util/constants';
65

76
const pixicherryBlossoms = (cherryBlossomsSpeed: number) => {
87
// アニメーション パラメータ
@@ -35,8 +34,8 @@ const pixicherryBlossoms = (cherryBlossomsSpeed: number) => {
3534
function tickerFn(delta: number) {
3635
// 桜の位置を制御するために使用される長さと幅を取得します
3736
// 获取长宽，用于控制花出现位置
38-
const stageWidth = SCREEN_CONSTANTS.width;
39-
const stageHeight = SCREEN_CONSTANTS.height;
37+
const stageWidth = WebGAL.canvasWidth;
38+
const stageHeight = WebGAL.canvasHeight;
4039
// オブジェクトを作成
4140
// 创建对象
4241
const bunny = new PIXI.Sprite(texture);

‎packages/webgal/src/Core/gameScripts/pixi/performs/rain.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import * as PIXI from 'pixi.js';
22
import { registerPerform } from '@/Core/util/pixiPerformManager/pixiPerformManager';
33

44
import { WebGAL } from '@/Core/WebGAL';
5-
import { SCREEN_CONSTANTS } from '@/Core/util/constants';
65

76
const pixiRain = (rainSpeed: number, number: number) => {
87
// 动画参数
@@ -29,8 +28,8 @@ const pixiRain = (rainSpeed: number, number: number) => {
2928
// 监听动画更新
3029
function ticker(delta: number) {
3130
// 获取长宽，用于控制雪花出现位置
32-
const stageWidth = SCREEN_CONSTANTS.width;
33-
const stageHeight = SCREEN_CONSTANTS.height;
31+
const stageWidth = WebGAL.canvasWidth;
32+
const stageHeight = WebGAL.canvasHeight;
3433
for (let i = 0; i < number; i++) {
3534
// 创建对象
3635
const bunny = new PIXI.Sprite(texture);

‎packages/webgal/src/Core/gameScripts/pixi/performs/snow.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import * as PIXI from 'pixi.js';
22
import { registerPerform } from '@/Core/util/pixiPerformManager/pixiPerformManager';
33

44
import { WebGAL } from '@/Core/WebGAL';
5-
import { SCREEN_CONSTANTS } from '@/Core/util/constants';
65

76
const pixiSnow = (snowSpeed: number) => {
87
// 动画参数
@@ -27,8 +26,8 @@ const pixiSnow = (snowSpeed: number) => {
2726
const bunnyList: any = [];
2827
let addBunnyCounter = 0;
2928
// 获取长宽，用于控制雪花出现位置
30-
const stageWidth = SCREEN_CONSTANTS.width;
31-
const stageHeight = SCREEN_CONSTANTS.height;
29+
const stageWidth = WebGAL.canvasWidth;
30+
const stageHeight = WebGAL.canvasHeight;
3231
// 监听动画更新
3332
function tickerFn(delta: number) {
3433
addBunnyCounter++;

0 commit comments

Comments
 (0)