Skip to content

README.md

Latest commit

 

History

History
499 lines (394 loc) · 20.6 KB

README.md

File metadata and controls

499 lines (394 loc) · 20.6 KB

Izrada igre u svemiru, dio 5: Bodovanje i životi

journey
    title Tvoj put dizajna igara
    section Povratne informacije igrača
      Razumjeti psihologiju bodovanja: 3: Student
      Naučiti vizualnu komunikaciju: 4: Student
      Dizajnirati sustave nagrađivanja: 4: Student
    section Tehnička implementacija
      Iscrtavanje teksta na platnu: 4: Student
      Upravljanje stanjem: 5: Student
      Ažuriranja vođena događajima: 5: Student
    section Dorada igre
      Dizajn korisničkog iskustva: 5: Student
      Uravnotežiti izazov i nagradu: 5: Student
      Stvoriti angažirajuću igru: 5: Student
Loading

Pred-predavanja kviz

Pred-predavanja kviz

Spremni da vašoj igri u svemiru date stvarni osjećaj igre? Dodajmo bodovanje i upravljanje životima - osnovne mehanike koje su prve arkadne igre poput Space Invaders pretvorile iz jednostavnih demonstracija u zaraznu zabavu. Ovo je trenutak kada vaša igra postaje zaista igriva.

mindmap
  root((Sustavi povratnih informacija u igrama))
    Visual Communication
      Prikaz teksta
      Prikaz ikona
      Psihologija boja
      Dizajn izgleda
    Scoring Mechanics
      Vrijednosti bodova
      Vremenski raspored nagrada
      Praćenje napretka
      Sustavi postignuća
    Life Management
      Rizik naspram nagrade
      Agencija igrača
      Uravnoteženost težine
      Mehanike oporavka
    User Experience
      Trenutni povratni signal
      Jasne informacije
      Emocionalni odgovor
      Petlje angažmana
    Implementation
      Canvas API
      Upravljanje stanjima
      Sustavi događaja
      Učinkovitost
Loading

Iscrtavanje teksta na zaslon - glas vaše igre

Za prikaz rezultata, trebamo naučiti kako prikazati tekst na platnu (canvas). Metoda fillText() je vaš glavni alat za to - ista tehnika koja se koristila u klasičnim arkadnim igrama za prikaz bodova i statusnih informacija.

flowchart LR
    A["📝 Tekstualni sadržaj"] --> B["🎨 Stiliziranje"]
    B --> C["📍 Pozicioniranje"]
    C --> D["🖼️ Renderiranje platna"]
    
    E["Obitelj fonta"] --> B
    F["Veličina fonta"] --> B
    G["Boja"] --> B
    H["Poravnanje"] --> B
    
    I["X Koordinata"] --> C
    J["Y Koordinata"] --> C
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
Loading

Imate potpunu kontrolu nad izgledom teksta:

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ Zaronite dublje u dodavanje teksta na platno - možda ćete biti iznenađeni koliko kreativni možete biti s fontovima i stiliziranjem!

Životi - Više od broja

U dizajnu igara, "život" predstavlja granicu pogreške igrača. Ovaj koncept potječe od pinball automata, gdje ste dobivali više kuglica za igru. U ranijim videoigrama poput Asteroids, životi su igračima davali dozvolu za rizik i učenje iz pogrešaka.

flowchart TD
    A["🎮 Akcija Igrača"] --> B{"Procjena Rizika"}
    
    B --> C["Visok Rizik, Visoka Nagrada"]
    B --> D["Sigurna Strategija"]
    
    C --> E{"Ishod"}
    D --> F["Stalan Napredak"]
    
    E -->|Uspjeh| G["🏆 Veliki Bodovi"]
    E -->|Neuspjeh| H["💔 Izgubi Život"]
    
    H --> I{"Preostali Životi?"}
    I -->|Da| J["🔄 Pokušaj Ponovno"]
    I -->|Ne| K["💀 Kraj Igre"]
    
    J --> B
    G --> B
    F --> B
    
    style C fill:#ffebee
    style D fill:#e8f5e8
    style G fill:#e3f2fd
    style H fill:#fff3e0
Loading

Vizualni prikaz ima veliki značaj - prikazivanje ikona brodova umjesto samo "Životi: 3" stvara trenutnu vizualnu prepoznatljivost, slično kao što su rani arkadni automati koristili ikonografiju za komunikaciju preko jezičnih barijera.

Izgradnja sustava nagrađivanja vaše igre

Sada ćemo implementirati osnovne sustave povratne informacije koji igrače drže angažiranima:

sequenceDiagram
    participant Player
    participant GameEngine
    participant ScoreSystem
    participant LifeSystem
    participant Display
    
    Player->>GameEngine: Puca na neprijatelja
    GameEngine->>ScoreSystem: Dodjeli bodove
    ScoreSystem->>ScoreSystem: +100 bodova
    ScoreSystem->>Display: Ažuriraj rezultat
    
    Player->>GameEngine: Sudar s neprijateljem
    GameEngine->>LifeSystem: Izgubi život
    LifeSystem->>LifeSystem: -1 život
    LifeSystem->>Display: Ažuriraj živote
    
    alt Životi > 0
        LifeSystem->>Player: Nastavi igru
    else Životi = 0
        LifeSystem->>GameEngine: Kraj igre
    end
Loading
  • Sustav bodovanja: Svaki uništeni neprijateljski brod donosi 100 bodova (zaokruženi brojevi lakši su igračima za mentalno računanje). Rezultat se prikazuje u donjem lijevom kutu.
  • Brojač života: Vaš junak počinje s tri života - standard uspostavljen od ranih arkadnih igara za balansiranje izazova i igrivosti. Svaka kolizija s neprijateljem oduzima jedan život. Preostale živote prikazat ćemo u donjem desnom kutu koristeći ikone brodova life image.

Krenimo s izradom!

Prvo postavite svoj radni prostor. Navigirajte do datoteka unutar podmape your-work. Trebali biste vidjeti ove datoteke:

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
-| index.html
-| app.js
-| package.json

Za testiranje vaše igre, pokrenite razvojni server iz mape your_work:

cd your-work
npm start

Ovo pokreće lokalni server na http://localhost:5000. Otvorite ovu adresu u svojem pregledniku kako biste vidjeli svoju igru. Testirajte kontrole sa strelicama i pokušajte pucati na neprijatelje da provjerite radi li sve.

flowchart TD
    A["1. Učitavanje Sredstava"] --> B["2. Varijable Igre"]
    B --> C["3. Detekcija Sudara"]
    C --> D["4. Poboljšanje Hercega"]
    D --> E["5. Funkcije Prikaza"]
    E --> F["6. Obraditelji Događaja"]
    
    G["Slika Ikone Života"] --> A
    H["Praćenje Rezultata i Života"] --> B
    I["Presjeci Herceg-Neprijatelj"] --> C
    J["Metode Bodova i Života"] --> D
    K["Prikaz Teksta i Ikona"] --> E
    L["Logika Nagrade i Kazne"] --> F
    
    F --> M["🎮 Kompletna Igra"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1
    style F fill:#fce4ec
    style M fill:#e1f5fe
Loading

Vrijeme za kodiranje!

  1. Preuzmite vizualne resurse koji su vam potrebni. Kopirajte datoteku life.png iz mape solution/assets/ u svoju mapu your-work. Zatim dodajte lifeImg u svoju funkciju window.onload:

    lifeImg = await loadTexture("assets/life.png");

  2. Ne zaboravite dodati lifeImg na svoj popis resursa:

    let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();

  3. Postavite varijable igre. Dodajte kod za praćenje ukupnog rezultata (koji počinje od 0) i preostalih života (koji počinju od 3). Prikazat ćemo ih na ekranu kako bi igrači uvijek znali kada su.

  4. Implementirajte detekciju sudara. Proširite funkciju updateGameObjects() da detektira kada neprijatelji udare vašeg junaka:

    enemies.forEach(enemy => {
    const heroRect = hero.rectFromGameObject();
    if (intersectRect(heroRect, enemy.rectFromGameObject())) {
      eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
    }
  })

  5. Dodajte praćenje života i bodova vašem junaku.

    1. Inicijalizirajte brojače. Ispod this.cooldown = 0 unutar klase Hero postavite život i bodove:

      this.life = 3;
this.points = 0;

    2. Prikažite ove vrijednosti igraču. Napravite funkcije za iscrtavanje tih vrijednosti na ekranu:

      function drawLife() {
  // TODO, 35, 27
  const START_POS = canvas.width - 180;
  for(let i=0; i < hero.life; i++ ) {
    ctx.drawImage(
      lifeImg, 
      START_POS + (45 * (i+1) ), 
      canvas.height - 37);
  }
}

function drawPoints() {
  ctx.font = "30px Arial";
  ctx.fillStyle = "red";
  ctx.textAlign = "left";
  drawText("Points: " + hero.points, 10, canvas.height-20);
}

function drawText(message, x, y) {
  ctx.fillText(message, x, y);
}

    3. Povežite sve u vašu glavnu petlju igre. Dodajte ove funkcije u vašu funkciju window.onload odmah nakon updateGameObjects():

      drawPoints();
drawLife();

🔄 Pedagoška provjera

Razumijevanje dizajna igre: Prije implementacije posljedica, pobrinite se da razumijete:

  • ✅ Kako vizualna povratna informacija komunicira stanje igre igračima
  • ✅ Zašto dosljedni raspored elemenata korisničkog sučelja poboljšava upotrebljivost
  • ✅ Psihologiju bodova i upravljanja životima
  • ✅ Kako se iscrtavanje teksta na platnu razlikuje od HTML teksta

Brzi samoprovjera: Zašto arkadne igre uglavnom koriste zaokružene brojeve za bodovanje? Odgovor: Zaokruženi brojevi su lakši igračima za mentalno računanje i stvaraju zadovoljavajuće psihološke nagrade

Principi korisničkog iskustva: Sada primjenjujete:

  • Vizualna hijerarhija: Važne informacije smještene su istaknuto
  • Trenutna povratna informacija: Ažuriranja u stvarnom vremenu na akcije igrača
  • Kognitivno opterećenje: Jednostavna i jasna prezentacija informacija
  • Emocionalni dizajn: Ikone i boje koje stvaraju vezu s igračem

  1. Implementirajte posljedice i nagrade igre. Sada ćemo dodati sustave povratne informacije koji čine akcije igrača smislenima:

    1. Sudari oduzimaju živote. Svaki put kada vaš junak udari neprijatelja, trebate izgubiti jedan život.

      Dodajte ovu metodu u klasu Hero:

      decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}

    2. Pucanje po neprijateljima donosi bodove. Svaki uspješan pogodak donosi 100 bodova, što pruža trenutnu pozitivnu povratnu informaciju za precizno gađanje.

      Proširite klasu Hero ovom metodom za povećanje bodova:

        incrementPoints() {
    this.points += 100;
  }

      Sada povežite ove funkcije s vašim događajima sudara:

      eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
   first.dead = true;
   second.dead = true;
   hero.incrementPoints();
})

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
   enemy.dead = true;
   hero.decrementLife();
});

✅ Zanima vas koje su druge igre napravljene u JavaScriptu i Canvasu? Istražite malo - mogli biste se iznenaditi što je sve moguće!

Nakon što implementirate ove funkcionalnosti, testirajte svoju igru da vidite kompletan sustav povratne informacije u akciji. Trebali biste vidjeti ikone života u donjem desnom kutu, rezultat u donjem lijevom, i primijetiti kako sudari smanjuju živote, a uspješni hitci povećavaju rezultat.

Vaša igra sada sadrži ključne mehanike koje su ranim arkadnim igrama dale privlačnost - jasne ciljeve, trenutnu povratnu informaciju i značajne posljedice za akcije igrača.

🔄 Pedagoška provjera

Kompletan sustav dizajna igara: Provjerite svoje razumijevanje sustava povratne informacije igrača:

  • ✅ Kako mehanike bodovanja stvaraju motivaciju i angažman igrača?
  • ✅ Zašto je vizualna dosljednost važna za dizajn korisničkog sučelja?
  • ✅ Kako sustav života balansira izazov i zadržavanje igrača?
  • ✅ Koju ulogu igra trenutna povratna informacija u stvaranju zadovoljavajuće igrivosti?

Integracija sustava: Vaš sustav povratne informacije demonstrira:

  • Dizajn korisničkog iskustva: Jasnu vizualnu komunikaciju i hijerarhiju informacija
  • Arhitekturu vođenu događajima: Odgovorne nadogradnje na akcije igrača
  • Upravljanje stanjem: Praćenje i prikaz dinamičkih podataka igre
  • Majstorstvo platna (Canvas): Iscrtavanje teksta i pozicioniranje spriteova
  • Psihologiju igara: Razumijevanje motivacije i angažmana igrača

Profesionalni obrasci: Implementirali ste:

  • MVC arhitekturu: Odvajanje logike igre, podataka i prikaza
  • Observer šablon: Ažuriranja vođena događajima za promjene stanja igre
  • Dizajn komponenti: Ponovno upotrebljive funkcije za prikaz i logiku
  • Optimizaciju performansi: Efikasno iscrtavanje u petljama igre

⚡ Što možete napraviti u narednih 5 minuta

  • Eksperimentirajte s različitim veličinama fonta i bojama za prikaz rezultata
  • Pokušajte mijenjati vrijednosti bodova i vidite kako to utječe na osjećaj igre
  • Dodajte console.log izjave za praćenje promjena bodova i života
  • Testirajte granične slučajeve poput potrošnih života ili postizanja visokih rezultata

🎯 Što možete postići ovaj sat

  • Završiti kviz nakon lekcije i razumjeti psihologiju dizajna igara
  • Dodati zvučne efekte za bodovanje i gubitak života
  • Implementirati sustav visokih rezultata koristeći localStorage
  • Kreirati različite vrijednosti bodova za različite vrste neprijatelja
  • Dodati vizualne efekte poput podrhtavanja ekrana pri gubitku života

📅 Vaše tjedno putovanje kroz dizajn igara

  • Završiti potpunu svemirsku igru s izbrušenim sustavima povratne informacije
  • Implementirati napredne mehanike bodovanja poput množitelja kombo bodova
  • Dodati postignuća i sadržaj za otključavanje
  • Kreirati sustave za progresiju i balansiranje težine
  • Dizajnirati korisnička sučelja za izbornike i ekrane igre završene
  • Proučiti druge igre da biste razumjeli mehanizme angažmana

🌟 Vaša mjesečna majstorija razvoja igara

  • Izraditi potpune igre s sofisticiranim sustavima napredovanja
  • Naučiti analitiku igara i mjerenje ponašanja igrača
  • Doprinijeti projektima otvorenog koda za razvoj igara
  • Ovladati naprednim obrascima dizajna igara i monetizacije
  • Kreirati edukativne sadržaje o dizajnu igara i korisničkom iskustvu
  • Izraditi portfelj koji prikazuje vještine dizajna i razvoja igara

🎯 Vaš vremenski plan za majstoriju dizajna igara

timeline
    title Napredak učenja dizajna igara i povratnih informacija igrača
    
    section Temelj (10 minuta)
        Vizualna komunikacija: Prikaz teksta
                             : Dizajn ikona
                             : Principi izgleda
                             : Psihologija boja
        
    section Psihologija igrača (20 minuta)
        Sustavi motivacije: Vrijednosti bodova
                          : Rizik nasuprot nagradi
                          : Povratne informacije o napretku
                          : Dizajn postignuća
        
    section Tehnička implementacija (30 minuta)
        Ovladavanje Canvasom: Pozicioniranje teksta
                             : Prikaz spriteova
                             : Upravljanje stanjima
                             : Optimizacija performansi
        
    section Ravnoteža igre (40 minuta)
        Dizajn težine: Upravljanje životima
                      : Krivulje bodovanja
                      : Zadržavanje igrača
                      : Pristupačnost
        
    section Korisničko iskustvo (50 minuta)
        Dizajn sučelja: Hijerarhija informacija
                       : Odzivne povratne informacije
                       : Emocionalni dizajn
                       : Testiranje upotrebljivosti
        
    section Napredni sustavi (1 tjedan)
        Mehanike igre: Sustavi napretka
                      : Integracija analitike
                      : Dizajn monetizacije
                      : Značajke zajednice
        
    section Vještine u industriji (1 mjesec)
        Profesionalni razvoj: Timsku suradnju
                            : Dokumentaciju dizajna
                            : Istraživanje igrača
                            : Optimizaciju platforme
Loading

🛠️ Sažetak vašeg alata za dizajn igara

Nakon završetka ove lekcije, sada ste savladali:

  • Psihologiju igrača: Razumijevanje motivacije, rizika/nagrade i petlji angažmana
  • Vizualnu komunikaciju: Efektivan dizajn korisničkog sučelja koristeći tekst, ikone i raspored
  • Sustave povratne informacije: Odgovore u stvarnom vremenu na akcije i događaje igre
  • Upravljanje stanjem: Praćenje i efikasno prikazivanje dinamičkih podataka igre
  • Iscrtavanje teksta na platnu (Canvas): Profesionalni prikaz teksta sa stiliziranjem i pozicioniranjem
  • Integraciju događaja: Povezivanje korisničkih akcija s značajnim posljedicama u igri
  • Balansiranje igre: Dizajn težine i sustava napredovanja igrača

Primjene u stvarnom svijetu: Vaše vještine dizajna igara primjenjuju se izravno na:

  • Dizajn korisničkog sučelja: Kreiranje privlačnih i intuitivnih sučelja
  • Razvoj proizvoda: Razumijevanje motivacije korisnika i povratnih petlji
  • Edukacijsku tehnologiju: Gamifikaciju i sustave angažmana u učenju
  • Vizualizaciju podataka: Provođenje složenih informacija na pristupačan i angažirajući način
  • Razvoj mobilnih aplikacija: Mehanike zadržavanja i dizajn korisničkog iskustva
  • Marketinšku tehnologiju: Razumijevanje ponašanja korisnika i optimizaciju konverzija

Profesionalne vještine koje ste stekli: Sada možete:

  • Dizajnirati korisnička iskustva koja motiviraju i angažiraju korisnike
  • Implementirati sustave povratne informacije koji efikasno usmjeravaju ponašanje korisnika
  • Balansirati izazov i pristupačnost u interaktivnim sustavima
  • Kreirati vizualnu komunikaciju koja funkcionira za različite skupine korisnika
  • Analizirati ponašanje korisnika i iterirati na poboljšanjima dizajna

Koncepti razvoja igara koje ste savladali:

  • Motivacija igrača: Razumijevanje što pokreće angažman i zadržavanje
  • Vizualni dizajn: Kreiranje jasnih, atraktivnih i funkcionalnih sučelja
  • Integracija sustava: Povezivanje više sustava igre u skladno iskustvo
  • Optimizacija performansi: Efikasno iscrtavanje i upravljanje stanjem
  • Pristupačnost: Dizajn za različite razine vještina i potrebe igrača

Sljedeći korak: Spremni ste istražiti napredne obrasce dizajna igara, implementirati analitičke sustave ili proučiti monetizaciju i strategije zadržavanja igrača!

🌟 Postignuće otključano: Izgradili ste kompletan sustav povratne informacije igrača s profesionalnim principima dizajna igara!

GitHub Copilot Agent Challenge 🚀

Upotrijebite Agent način rada da dovršite sljedeći izazov:

Opis: Unaprijedite sustav bodovanja svemirske igre implementacijom sustava najboljeg rezultata s trajnim spremanjem i bonusnim bodovima.

Zadatak: Kreirajte sustav visokih rezultata koji sprema najbolji rezultat igrača u localStorage. Dodajte bonus bodove za više uzastopnih ubijenih neprijatelja (kombo sustav) i implementirajte različite vrijednosti bodova za različite vrste neprijatelja. Uključite vizualni indikator kada igrač postigne novi najbolji rezultat i prikažite trenutni najbolji rezultat na zaslonu igre.

🚀 Izazov

Sada imate funkcionalnu igru s bodovanjem i životima. Razmislite koje dodatne značajke bi mogle poboljšati iskustvo igrača.

Kviz nakon predavanja

Kviz nakon predavanja

Pregled i samostalno učenje

Želite li istražiti više? Istražite različite pristupe bodovanju i sustavima života u igrama. Postoje fascinantni igraći engine-i poput PlayFab koji upravljaju bodovanjem, ljestvicama i napredovanjem igrača. Kako bi integracija takvog sustava mogla podići vašu igru na višu razinu?

Zadatak

Izradite igru s bodovanjem

Odricanje od odgovornosti: Ovaj dokument je preveden pomoću AI prijevodnog servisa Co-op Translator. Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati službenim i autoritativnim izvorom. Za kritične informacije preporučujemo profesionalni ljudski prijevod. Nismo odgovorni za bilo kakve nesporazume ili pogrešna tumačenja koja proizlaze iz korištenja ovog prijevoda.