Игра запускается и играется: три рантайм-бага и адаптивная вёрстка
Проверено вживую в Chrome: лобби -> матч -> бот ходит -> результат -> статистика в лобби. Полный матч отыгран, оба исхода видел. Баги, которые собирались и типизировались, но падали только в рантайме: 1. Canvas не менял размер под экран. Своего cc.Widget у него не было, а alignCanvasWithScreen правит только камеру. Canvas оставался 1280x720, и все растянутые по нему дети — тоже. 2. [...map.values()] превращается сборкой в [].concat(map.values()), а concat не разворачивает итератор, а кладёт его одним элементом. Отсюда "view.cancelAnimations is not a function" на первой же уборке карт. Теперь Array.from. 3. Рубашка козыря рисовалась поверх колоды, а не под ней. Вёрстка переделана под требование UI.md (4:3 .. 21:9): - fitWidth даёт постоянную ширину, но не высоту: на 4:3 видно только ±720 юнитов. Кнопка "Leave" на y=840 и низ руки на -860 были за экраном именно там, где это важнее всего - рука и панель действий считаются от нижней границы экрана, "Leave" прибит виджетом к левому верхнему углу - стол — один ряд до шести карт вместо двух рядов по три: экономит ~215 юнитов высоты, которых на 4:3 нет. Ряд центрируется по тем картам, что реально на столе - затемнение под окном результата рисуется непрозрачным спрайтом: тонировать и без того полупрозрачный спрайт почти ничего не даёт Инструменты: - npm run serve — отдаёт сборку и роут /_aspects: игра в трёх фиксированных iframe-ах 4:3 / 16:9 / 21:9. Движок подгоняет себя под окно, поэтому iframe — единственный простой способ увидеть вёрстку в форме, которой окно не имеет - npm run check:spreads — ловит спред неитерируемого в массив - npm run check — чистота core, спреды, сцены, типы, тесты Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
+28
-13
@@ -241,19 +241,34 @@ The card atlas is the only texture where this matters — 2048×2048 uncompresse
|
||||
is 16 MB of video memory, and ASTC 6×6 brings that to roughly 1.2 MB. Do it
|
||||
before the first device build.
|
||||
|
||||
### What is and is not verified
|
||||
|
||||
The rules, the bot and the save format are covered by `npm test` and are
|
||||
verified. The presentation layer is verified only as far as this environment
|
||||
allows: the project builds clean, every component reference in the scene is
|
||||
populated, and all 37 card sprites pack into one 2048² texture.
|
||||
|
||||
It has **not** been seen running. The browser available here falls back to a
|
||||
software renderer that cannot start the Cocos main loop (`totalFrames` stays at
|
||||
0), so no screenshot of the actual game was possible. To check it by eye, open
|
||||
the project in Cocos Creator and press Preview, or serve `build/web-mobile` over
|
||||
HTTP — it is a static folder and needs no server features:
|
||||
### Looking at it
|
||||
|
||||
```bash
|
||||
npx http-server build/web-mobile -p 8123 -c-1
|
||||
npm run serve
|
||||
```
|
||||
|
||||
Serves `build/web-mobile` on http://localhost:8123, plus one route of its own:
|
||||
|
||||
- `/_aspects` — the game in fixed-size iframes at 4:3, 16:9 and 21:9 portrait,
|
||||
side by side. The engine resizes itself to fill whatever window it is in, so
|
||||
an iframe is the only straightforward way to see the layout at a shape the
|
||||
desktop window is not.
|
||||
- `/_aspects?only=16:9&h=690` — one viewport, which boots much faster than three.
|
||||
|
||||
The layout has been checked this way at all three ratios, and a full match
|
||||
played through in the browser: deal, attack, defend, take, discard, redraw,
|
||||
result overlay, and the statistics written and read back in the lobby.
|
||||
|
||||
### Three traps this project has already fallen into
|
||||
|
||||
All three build and type-check cleanly, look right in the editor, and fail only
|
||||
at runtime. Each now has a guard; `npm run check` runs all of them.
|
||||
|
||||
1. **Node layers.** `nodeCreate` puts nodes on DEFAULT; a Canvas camera renders
|
||||
UI_2D only, so the build shows the camera's clear colour and nothing else.
|
||||
The scene view renders every layer, so the editor looks fine.
|
||||
2. **The Canvas needs its own Widget.** Without one the Canvas keeps the size it
|
||||
was authored at and every widget-stretched child inherits it.
|
||||
`alignCanvasWithScreen` does not do this — it only adjusts the camera.
|
||||
3. **Array spread of a non-array.** The build turns `[...x]` into `[].concat(x)`,
|
||||
which appends an iterator rather than expanding it. Use `Array.from`.
|
||||
|
||||
Reference in New Issue
Block a user