GameMaker Studio 2: Mestre din spil-opløsning

Få styr på opløsning i GameMaker Studio 2

At skabe spil til flere platforme medfører ofte en stor udfordring: at få spillet til at se godt ud på utallige skærmstørrelser og aspektforhold. Især på mobile enheder er variationen enorm. Heldigvis findes der værktøjer og teknikker til at gøre denne proces mere overskuelig. Denne artikel dykker ned i, hvordan du med GameMaker Studio 2 kan mestre opløsningsstyring og sikre en ensartet og professionel visuel oplevelse på tværs af alle enheder.

Vi vil udforske et kraftfuldt og gratis script kaldet Advanced Resolution Manager, der er designet til netop dette formål. Scriptet er open source og utroligt brugervenligt, hvilket gør det til et uundværligt værktøj for både nybegyndere og erfarne spiludviklere.

Hvad er Advanced Resolution Manager?

Advanced Resolution Manager er et GML (GameMaker Language) script, der automatiserer og forenkler processen med at håndtere forskellige spilopløsninger. I stedet for at bekymre dig om de komplekse matematiske beregninger bag skalering og tilpasning, lader scriptet dig fokusere på de kreative aspekter af dit spil. Det er designet til at være kompatibelt med GMS2.3+ og tilbyder en robust løsning til både desktop- og mobile platforme.

Kernefunktioner og Fordele

• Nem Multi-Opløsning Håndtering: Forenkler processen med at tilpasse dit spil til forskellige skærmstørrelser.
• Livskvalitets Funktioner for Mobile: Tilbyder specifikke funktioner, der forbedrer brugeroplevelsen på mobile enheder.
• Fleksibel Design Opløsning: Du kan definere din ideelle opløsning (enten bredde eller højde), og scriptet beregner resten.
• Orientationsstyring: Understøtter både landscape og portrait orienteringer, med specifikke optimeringer for mobile enheder.
• Gratis og Open Source: Under MIT-licensen kan du bruge og modificere scriptet frit.

Kompatibilitet og Begrænsninger

Scriptet er primært udviklet med mobile enheder i tankerne, men fungerer også upåklageligt på desktop. Dog er det vigtigt at bemærke følgende:

• UWP, HTML5 og Konsoller: Scriptet er ikke testet på disse platforme. Hvis du ejer licens til dem, opfordres du til at teste og bidrage med eventuelle tilpasninger.
• Desktop vs. Mobil: Funktioner som _is_orientation_vertical er primært tiltænkt mobile projekter. Når du udvikler til desktop, skal _is_orientation_vertical sættes til false.
• Skalering i Fuldskærm: Skaleringsargumentet (scale) fungerer kun i vinduestilstand på desktop og ignoreres i fuldskærm.
• Override Argument:overide_other_value argumentet er beregnet til mobiludvikling og kan forårsage betydelige forvrængninger i fuldskærm på desktop.

Kendte Begrænsninger og Løsninger

1. Ujævn Skalering ved Store Vinduer: Hvis spilvinduet er større end skærmen, kan GameMaker skalere det ujævnt.Løsning: Brug scale argumentet til at reducere vinduesstørrelsen, så det passer på skærmen.
2. Grafisk Forvrængning med Application Surface (VM->Test): Ved VM->Test builds med is_design_value_vertical sat til true, kan grafikken blive forvrænget, hvis application surface er aktiveret.Løsning: Aktivér og brug application surface betinget baseret på os_type for at "fake" portræt-orientering.
3. Forvrængning i Fuldskærm (VM->Test): Ligesom ovenstående punkt, kan fuldskærmstilstand med is_design_value_vertical sat til true i VM->Test builds forårsage grafiske forvrængninger.Løsning: Dette er primært et problem for VM->Test builds og giver ikke mening at bruge i praksis. Den faktiske mobile build vil alligevel være fuldskærm.

Sådan Bruger Du Scriptet

Scriptet, set_resolution, tager et obligatorisk argument og op til fem valgfri argumenter:

setresolution(designvalue, isdesignvertical, isorientationvertical, resizeallrooms, scale, overideothervalue)

Argument Forklaring

• design_value (obligatorisk): Din ideelle spilopløsning (bredde eller højde).
• is_design_value_vertical (valgfri): Angiver om design_value er højde (true) eller bredde (false). Standard er false.
• is_orientation_vertical (valgfri): Angiver spillets orientering: portræt (true) eller landskab (false). Primært til mobil. Standard er false.
• resize_all_rooms (valgfri): Hvis sat til true, vil alle rum (undtagen rum 0) blive resized til den beregnede opløsning. Nyttigt for spil med dynamiske rumdimensioner. Standard er false.
• scale (valgfri): En skaleringsfaktor for at tilpasse vinduesstørrelsen på desktop (kun vinduestilstand). Bruges til at få vinduet til at passe på skærmen.
• overide_other_value (valgfri): Tillader dig at angive den anden dimension (højde, hvis design_value var bredde, og omvendt) for at teste specifikke aspektforhold uden en emulator. Kun til mobiludvikling.

Eksempelprojekter

For at illustrere brugen af scriptet medfølger der fire eksempelprojekter:

1. Landscape Orientation Example Project

Dette projekt viser, hvordan man håndterer spil i landskabsorientering. Det er ideelt til både desktop og mobile enheder.

• For Desktop: Konfigurer dine Game Options til kun at tillade landskabsorientering. Kald set_resolution med din ønskede designbredde. Argumenterne is_design_value_vertical og is_orientation_vertical sættes til false. resize_all_rooms kan sættes til true hvis nødvendigt. Skaleringsargumentet (scale) kan bruges til at justere vinduesstørrelsen på desktop builds.
• For Mobil: Sørg for, at kun landskabsorientering er valgt i dine build-indstillinger. Scriptet vil automatisk tilpasse sig enhedens opløsning. Du kan bruge overide_other_value til at teste forskellige aspektforhold.

Eksempel på kald:

setresolution(1920, false, false, true, 0.5);

Dette sætter designbredden til 1920, angiver at det er bredden, at orienteringen er landskab, at alle rum skal resizes, og at vinduet skal skaleres til 50% på desktop builds.

2. Portrait Orientation Example Project

Dette projekt fokuserer på spil i portræt-orientering, primært for mobile enheder.

• Konfigurer dine Game Options til kun at tillade portræt-orientering.
• Kald set_resolution med din designhøjde. Argumentet is_orientation_vertical skal sættes til true.

Eksempel på kald:

setresolution(1920, true, true, true);

Her sættes designhøjden til 1920, det angives at det er højden, og at orienteringen er portræt.

3. Dynamic Orientation Example Project (BONUS)

Dette projekt lader spillet skifte mellem landskab og portræt dynamisk. Det giver mest mening at teste på en faktisk enhed.

• Konfigurer dine Game Options til at tillade både portræt og landskab.
• Scriptet håndterer automatisk skiftet baseret på enhedens orientering.

4. Dynamic Window Resize Example Project (BONUS 2)

Dette projekt demonstrerer, hvordan man håndterer vinduesresizing på desktop med en låst aspektforhold.

• Dette er nyttigt for at give brugerne mulighed for at ændre vinduesstørrelsen uden at ødelægge grafikken.

Supplerende Scripts til Kamera og UI

For at opnå de fulde effekter af opløsningsstyringen, skal du også konfigurere dit kamera og eventuelt din UI.

set_camera

Dette script hjælper med at sætte kameraets viewport. Du definerer et rektangel fra øverste venstre hjørne (x1, y1) til nederste højre hjørne (x2, y2).

setcamera(0, 0, WIDTH, HEIGHT);

Husk at kalde set_camera ved starten af hvert rum. WIDTH og HEIGHT bør defineres som makroer baseret på de globale variabler, der gemmer den beregnede opløsning:

#macro WIDTH global.idealwidth #macro HEIGHT global.idealheight

set_gui_size

For en optimal udvikleroplevelse kan du bruge set_gui_size til at tilpasse din GUI.

setguisize(WIDTH);

Dette kan kaldes én gang i starten af dit spil eller ved rumstart sammen med set_camera.

Optimering af HTML5 Eksport

Når du eksporterer til HTML5, er der yderligere optimeringer, du kan foretage for at forbedre ydeevne og brugeroplevelse:

Tilpas index.html

Du kan erstatte GameMaker's standard index.html fil med din egen brugerdefinerede fil for at tilføje CSS og JavaScript til at forbedre touch-håndtering og skalering.

CSS Regler

For at forhindre uønsket markering af canvaset ved berøring:

body { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: 0 ; } canvas { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: 0 ; -webkit-tap-highlight-color: rgba ( 255, 255, 255, 0 ) ; }

JavaScript til Touch og Skalering

For at forhindre forstørrelsesbobler ved langt tryk og for at matche spillets opløsning med enhedens skærm:

document.addEventListener('touchstart', e => { e.preventDefault(); }, { passive: false }) document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale=' + (1 / window.devicePixelRatio) + ', maximum-scale=1.0, user-scalable=0');

Centrering af Spil

For at centrere spillet i browseren:

.gm4html5div_class { display: flex; align-items: center; justify-content: center; height: 100 vh; }

Yderligere Optimeringer for HTML5

• Grafikstørrelse: Sørg for, at dine grafik-assets er korrekt dimensioneret, især med tanke på mindre mobile skærme. 1920×1080 kan være for stort.
• Blend Modes: Begræns brugen af blend_modes, da de er dyre for HTML5.
• Delta Tid: Brug delta-tid i stedet for room_speed for at sikre konsistent spilhastighed på tværs af enheder.
• Texture Pages: Optimer texture page swaps ved manuelt at organisere sprites i teksturgrupper for at reducere indlæsningstider. Brug texture_debug_messages(true); til at overvåge texture-indlæsning.

Konklusion

At håndtere forskellige opløsninger i GameMaker Studio 2 kan virke skræmmende, men med værktøjer som Advanced Resolution Manager bliver processen markant lettere. Ved at følge disse retningslinjer og eksperimentere med de medfølgende eksempler, kan du sikre, at dine spil ser fantastiske ud på alle enheder. Husk altid at teste grundigt på tværs af forskellige platforme og skærmstørrelser for at opnå den bedste brugeroplevelse.

Ofte Stillede Spørgsmål

Er GameMaker Studio 2 gratis?

GameMaker Studio 2 tilbyder en gratis prøveversion, men fuld funktionalitet kræver køb af en licens. Dog er værktøjer som Advanced Resolution Manager, som vi har diskuteret, gratis og open source.

Hvilken opløsning skal jeg tegne mine sprites i?

Det ideelle er at tegne dine sprites i din valgte design opløsning. Advanced Resolution Manager vil derefter skalere dem korrekt til andre opløsninger. Det er vigtigt at vælge en design opløsning, der passer til din spiltype og målgruppe. Overvej både bredde og højde, og hvordan din spilmekanik fungerer i forhold til skærmretning.

Hvordan kan jeg ændre spillets opløsning dynamisk?

Advanced Resolution Manager giver dig mulighed for at ændre opløsningen dynamisk. Du kan implementere en menu i dit spil, hvor spilleren kan vælge forskellige opløsninger. Scriptet tager sig af den bagvedliggende logik for at sikre, at spillet forbliver skarpt og uden forvrængning.

Er GameMaker Studio god til HTML5 eksport?

GameMaker Studio er et godt værktøj til HTML5 eksport, men som nævnt i artiklen, kan der være behov for yderligere optimeringer, især med hensyn til touch-input, skalering og ydeevne. Ved at følge optimeringsrådene kan du forbedre din HTML5 builds markant.

Hvis du vil læse andre artikler, der ligner GameMaker Studio 2: Mestre din spil-opløsning, kan du besøge kategorien Teknologi.