Introducerea modurilor de amestecare în Flash

Vă voi învăța cum să utilizați fiecare mod de amestecare în Flash. Pur și simplu, modurile de amestecare sunt folosite pentru a modifica valorile culorilor sau transparența în imagini. La fel cum sugerează și numele, modurile de amestecare sunt utilizate pentru combinarea imaginilor. Modurile de amestecare sunt frecvent utilizate pentru efecte speciale sau compoziții în jocuri, filme și editori de imagini. Din explozii, tranziții de ecran, mascare și iluminare, modurile de amestecare au multe aplicații în proiecte flash.


Vizualizare rapidă

Modificați modul de amestecare utilizând interfața de utilizare din colțul din partea de sus și trageți imaginile în jur pentru a crea efecte diferite?


Urmăriți ecranul?


? sau Citiți Tut

Modurile de amestecare fac o imagine compozită și creează efecte interesante prin amestecarea pixelilor în imagini suprapuse sau în clipuri video. Modurile de amestecare influențează culoarea și transparența pixelilor. Puteți utiliza modurile de amestecare pentru a evidenția evidențierile sau umbrele sau pentru a modifica culorile dintr-o imagine.

S-ar putea să observați că unele moduri de amestecare sunt un pic similare, dar ele nu sunt aceleași. Unele moduri de amestecare sunt opuse direct unul altuia, dar trebuie să știți care dintre acestea să fie utilizate în orice situație dată.


Cum funcționează?

Modurile de amestecare utilizează un strat de fundal și un strat de amestecare pentru a vă oferi un strat modificat final. Fiecare pixel din fundal este privit și modificat de imaginea de amestecare deasupra, oferindu-vă imaginea compusă. Culorile și transparența sunt luate în ecuație atunci când pixelii sunt procesați. Toate obiectele de afișare, inclusiv Sprites, Bitmaps și MovieClips, au o proprietate blendMode pe care o puteți modifica pentru a obține efectul pe care îl căutați. Puteți seta proprietatea blendMode la constantele definite în clasa flash.display.BlendMode sau puteți utiliza valorile efective ale șirului în citate.

Modurile de amestecare schimbă adesea culorile stratului pe care îl atașați la modul de amestecare, deci trebuie să experimentați diferite culori și moduri de amestecare pentru a vedea cum arată rezultatele. Experimentarea cu diferite moduri de amestecare vă poate oferi o idee despre modul în care funcționează. Trebuie să rețineți că diferite culori intră adesea în joc cu diferite moduri de amestecare și este posibil să nu obțineți aceleași rezultate în funcție de imaginile de fundal și de amestecarea imaginilor utilizate. De asemenea, trebuie să fiți conștienți de ordinea în care aplicați straturile de amestecare, deoarece ordinele diferite vor da rezultate diferite.


Exemplu rapid:

displayObject.blendMode = BlendMode.ADD;

sau

displayObject.blendMode = 'adaugă';

Depinde de tine! Cu toate acestea, pentru prima opțiune, asigurați-vă că importați flash.display.BlendMode.

Mulți oameni vor purta doar prin fiecare mod de amestecare până când vor obține un efect care arată frumos, dar vreau să vă explic cum funcționează fiecare mod de amestecare și să vă arătați câteva exemple sau scenarii în care modurile de amestecare pot fi utile. Ca dezvoltator de jocuri, voi folosi exemple de moduri de amestecare într-un context de jocuri. În general, voi utiliza moduri de amestecare pentru lucruri precum ceață, explozii, particule și iluminare, dar modurile de amestecare au utilizări și funcții nesfârșite pe care va trebui să le veniți!

Voi vorbi despre aceste moduri de amestecare în perechi sau grupuri. Cele mai multe moduri de amestecare vin cu un partener similar sau direct opus. Astăzi voi acoperi modurile de amestecare enumerate mai jos.

  • NORMAL
  • STRAT
  • ALFA
  • ŞTERGE
  • ADĂUGA
  • SCĂDEA
  • UŞURA
  • ÎNTUNECA

Mod amestec: NORMAL

Descrierea și exemplele de utilizare

NORMAL aplică culoarea în mod normal, fără interacțiuni cu culorile de bază.

Primul mod de amestecare despre care trebuie să vorbesc este modul de amestecare NORMAL. Este, în mod esențial, modul implicit de amestecare care nu se aplică amestecului în imaginea de fundal.

Când experimentați cu diferite moduri de amestecare, veți utiliza pentru comparare modul de amestecare NORMAL.
Utilizarea modului de amestecare NORMAL este aceeași cu cea care nu utilizează deloc un mod de amestecare. Știind că modurile de amestecare necesită procesare și de multe ori au un efect asupra performanței proiectului dvs. Flash, ar trebui să încercați să limitați utilizarea modului de amestecare dacă puteți.

50 de obiecte cu amestecare NORMAL sunt mult mai rapide decât 50 de obiecte cu moduri de amestecare OVERLAY sau HARDLIGHT.

Descriere tehnica

Obiectul de afișare este afișat ca normal în partea de sus a fundalului. Nu se modifică valori de culoare sau transaprenție.

Exemplu:

displayObject.blendMode = BlendMode.NORMAL;

sau

displayObject.blendMode = 'normal';

Mod amestec: STRAT

Descrierea și exemplele de utilizare

Modul de amestecare LAYER este similar cu modul de amestecare NORMAL, deoarece nu modifică culorile. Cu toate acestea, modul de amestecare LAYER forțează crearea unui grup de transparență sau a unui canal alfa. Se stabilește, în esență, opacitatea stratului la 100%.

NOTĂ: Acest lucru este necesar pentru a compune cu modurile de amestecare ALPHA sau ERASE, despre care voi vorbi mai departe.

Descriere tehnica

Rendered în mod similar cu modul de amestecare NORMAL cu opacitate 100%. Crearea canalului alfa permite ca stratul să fie modificat prin alte moduri de amestecare care afectează transparența, cum ar fi ALPHA sau ERASE.

Exemplu:

displayObject.blendMode = BlendMode.LAYER;

sau

displayObject.blendMode = 'layer';

Mod amestec: ALPHA

Descrierea și exemplele de utilizare

Modul de amestec ALPHA modifică transparența stratului de fundal, făcându-l să vadă prin diferite zone, în funcție de transparența stratului de amestecare.

Descriere tehnica

Modul de amestecare ALPHA aplică o mască alfa, în care pixelii transparenți ai stratului de amestecare afectează transparența stratului de fond. În general, veți folosi un al doilea strat de fundal cu acest mod de amestecare, care va fi afișat prin primul fundal atunci când este făcut transparent.

Modul de amestecare LAYER trebuie să fie aplicat obiectului de afișare părinte, care acționează ca primul fundal care trebuie făcut transparent.

Exemplu:

displayObject.blendMode = BlendMode.ALPHA;

sau

displayObject.blendMode = 'alfa';

Mod amestec: Eroare

Descrierea și exemplele de utilizare

Modul de amestecare ERASE este opusul modului de amestecare ALPHA, dar modifică încă transaparența stratului de fond, făcându-l să vadă prin diverse zone, în funcție de transparența stratului de amestecare.

Descriere tehnica

Modul de amestecare ERASE funcționează ca modul de amestecare ALPHA, dar aplică o mască alfa inversată, în care pixelii opaci ai stratului de amestecare afectează transparența stratului de fond, făcând acești pixeli transparenți. În general, veți folosi un al doilea strat de fundal cu acest mod de amestecare, care va fi afișat prin primul fundal atunci când este făcut transparent.

Modul de amestecare LAYER trebuie să fie aplicat obiectului de afișare părinte, care acționează ca primul fundal care trebuie făcut transparent.

Exemplu:

displayObject.blendMode = BlendMode.ERASE;

sau

displayObject.blendMode = 'șterge';

Mod amestec: ADD

Descrierea și exemplele de utilizare

Modul ADD de amestecare este folosit pentru a întări albe și pentru a ușura suprapunerea culorilor. Culorile stratului de amestecare deasupra zonei mijlocii ușurează stratul de fundal, în timp ce culorile mai întunecate sunt transparente, lăsând stratul de fundal intact.

Descriere tehnica

Modul de amestecare ADD adaugă literalmente valorile de culoare hexagonală ale stratului de amestecare în stratul de fond. Nu poate merge mai mult decât albul.

Exemplu:

displayObject.blendMode = BlendMode.ADD;

sau

displayObject.blendMode = 'adaugă';

Mod amestec: SUBTRACT

Descrierea și exemplele de utilizare

Modul de amestecare SUBTRACT întunecă stratul de fundal și poate fi considerat opus modului de amestecare ADD. Suprafețele albe ale stratului de amestecare transformă stratul de fond negru, în timp ce zonele negre ale imaginii de amestecare nu afectează stratul de fundal.

Modul de amestecare SUBTRACT este folosit pentru a întări negrul și pentru a întuneca culorile care se suprapun. Culorile imaginii de amestecare deasupra intervalului de mijloc sunt întunecate, în timp ce culorile mai deschise sunt transparente, lăsând stratul de fundal neatins.

Descriere tehnica

Modul de amestecare SUBTRACT scade valorile de culoare hexagonală ale stratului de amestecare în stratul de fond. Nu poate merge mai jos decât negrul.

Exemplu:

displayObject.blendMode = BlendMode.SUBTRACT;

sau

displayObject.blendMode = 'scădea';

Mod amestec: LIGHTEN

Descrierea și exemplele de utilizare

LIGHTEN utilizează pixelii colorați mai ușori din fiecare strat. Similar modului de amestecare ADD, este utilizat pentru a întări zonele mai ușoare ale straturilor suprapuse. Fiecare pixel din fiecare strat este privit și se păstrează cele mai ușoare dintre cele două valori ale pixelilor.

Descriere tehnica

LIGHTEN înlocuiește pixelii de fundal care sunt mai întunecați decât pixelii din stratul de amestec. Pixelii de fundal mai ușori decât pixelii din stratul de amestec nu sunt modificați.

Exemplu:

displayObject.blendMode = BlendMode.LIGHTEN;

sau

displayObject.blendMode = 'lighten';

Mod amestec: DARKEN

Descrierea și exemplele de utilizare

DARKEN utilizează pixelii colorați mai întunecați din fiecare strat. Este opusul modului de amestecare LIGHTEN și este folosit pentru a întări zonele mai întunecate ale straturilor suprapuse. Fiecare pixel din fiecare strat este privit și se păstrează cele mai întunecate valori ale celor două pixeli. Acest lucru poate fi folosit pentru a adăuga diferite efecte de textură stratului nostru de fundal.

Descriere tehnica

DARKEN înlocuiește pixelii de fundal care sunt mai ușori decât pixelii din stratul de amestec. Pixelii de fundal mai întunecați decât pixelii din stratul de amestec nu sunt modificați.

Exemplu:

displayObject.blendMode = BlendMode.DARKEN;

sau

displayObject.blendMode = 'întunecat';

Urmatorul pas

A doua parte a acestui tutorial (care vine în curând) va acoperi modurile de amestecare rămase:

  • MULTIPLICA
  • DIFERENȚĂ
  • INVERSA
  • ECRAN
  • ACOPERIRE
  • LUMINĂ TARE

Rămâneți aproape!

Cod