Автоматизиране на разработката на игри!
За по-добро изживяване при четене можете да прочетете тази статия в моя блог на адрес philscode.com.
Сценарият 🖼️
И така, успешно пуснахте дузина популярни JavaScript игри през последните няколко години и точно когато сте на път да се отпуснете, да се насладите на уикенда и да оставите приходите да потекат, във вашата емисия се появява нов туит.
Не са страхотни новини за петък. Добре, просто ще проверя колко от игрите ми са засегнати...
😲😲😲😰😰
✋ Чакай, само секунда!
Какво ще кажете за всички тези сценарии във всяка игра? Не съм играл тези игри от години и има стотици тестови сценарии. Бих могъл да разчитам на Unit Testing и да наема персонал за QA, който да тества ръчно всичките ми игри, въпреки че това ще ми струва всички трудно спечелени пари, които игрите ми генерират.
Ръчното тестване никога не е добро и абсолютно не е мащабируемо. Трябва да има по-добър начин да се справим с това!
Истината 🧑⚖️
Горният сценарий може да изглежда пресилен, но много подобен имейл намери път до входящата кутия на Protopop Games (не по-малко от петък!). Вижте туит по-долу.
Както бе споменато в туита по-горе, Apple има нов План за подобряване на App Store, който по същество означава, че премахват приложения, които вече не получават актуализации. За някои приложения това наистина има смисъл, но за игри това не винаги има смисъл.
В крайна сметка няма значение какво мислим вие или аз — ако Apple, Google, Steam или друга платформа искат да наложат нови правила и да ви накарат да актуализирате всичките си приложения, те могат да направят точно това. Нашата най-добра защита срещу тези сценарии? Здрави тръбопроводи, които не само Unit test, но и E2E тестват нашите игри.
Решението 💡
За да демонстрирам това, ще разработя проста игра, базирана на JavaScript, използвайки Phaser и E2E тествам играта, използвайки някои усъвършенствани техники на Cypress. Няма да има произволно изчакване — което означава по-надеждни и предвидими тестове.
С две думи, тези E2E тестове ще взаимодействат с играта, ще направят екранна снимка и ще сравнят изображението с добре позната базова линия.
За бърз поглед проверете по-долу, за да видите някои от тестовете.
😎 Доста готино, нали?
Тези тестове не просто правят пълни екранни снимки и сравняват, а по-скоро раздели от Canvas за сравнение с известна базова линия. Определено не искате да правите твърде много пълни екранни снимки, тъй като вашите тестове ще станат много крехки много бързо.
Някои изображения също се подиграват за конкретни тестове, но е добра идея да се подиграват всички изображения с прозрачна версия, за да ви позволи да тествате изолирано.
Например, играчът и зомбитата анимират, което означава, че правенето на екранна снимка отново и отново би довело до различен резултат. Това би било твърде ненадеждно и би довело до нестабилно тестване, така че вместо това листовете за злоупотреба се подиграват с плътен цвят. Вижте сравнението по-долу заедно с кода за подигравка на изображението.
Сравнение на изображения:
Фрагмент Cypress за замяна на Player с персонализирано изображение:
`cy.intercept("/assets/img/player.png", { fixture: "mock-player.png" });`
Да, толкова е просто!
Заключение
В заключение...
- Имате поддържани стабилни тръбопроводи, които не само внедряват, но и стриктно тестват вашите приложения.
При тестване на екранни снимки...
- Избягвайте твърде много големи екранни снимки.
- Тествайте изолирано чрез осмиване на изображения, които не са част от теста (използвайки прозрачни версии).
- Подигравайте се с непредвидими спрайтове със солидни препратки.
- Никога не използвайте изрично изчакване, а по-скоро анкета за конкретен резултат.
Чувствайте се свободни да се „свържете с мен в Twitter“ — очаквам с нетърпение да чуя от вас!
Забавлявах се много, като сглобих това и успях да го направя толкова бързо с помощта на Yannick’s boilerplate, Kenny’s Assets, Phaser, Cypress и cypress-plugin-snapshots.
Ако сте харесали тази статия, вижте задълбочената статия, която написах за „Визуално тестване за разработка на софтуер“.
Бонус: Играйте играта 🎮
Щракнете тук, за да възпроизведете крайния резултат. Наслади се! 🎢.
Като предизвикателство коментирайте първия си опит за висок резултат по-долу!
