Agentlik Birlikdə bir sənət tərzi yaratmaq

Agent A-da Ruby La Rouge-nin gizli yuvasını sızdırın: Gizlətmədə bir tapmacadır.

Marketinq uğurlu bir indie oyunu yaratmaqda ən vacib cəhətlərdən biridir. Tez-tez bir marketinq aləti olaraq gözdən yayınan bir element sadəcə oyun sənətinizdir! Bənzərsiz və gözəl bir sənət üslubu yalnız mağazada satış qazanmağınıza kömək etmir, həm də mətbuatın və ən əsası, oyununuzun görünməsini və ya seçilməməsini seçən redaktorların diqqətini cəlb etməyə kömək edəcəkdir. Bu yazıda, kağızdan tutmuş son sənətə qədər, Agent A sənətkarlıq üslubunu Birliklə mobil qurğulara gətirmək üçün lazım olanları və inşallah inkişaf etdirənlərə bəzi faydalı anlayışlar təqdim etməyi addım-addım araşdırırıq!

Adım Mark White, mən Yak & Co-da Art Direktoruyam və Jason Rawlings (Qurğuşun Proqramçısı) ilə birlikdə 'Agent A: Gizlətmədə bir tapmacan', iOS, Android və ... shoePhones üçün bir casus temalı puzzle oyunu!

Agent A, Apple'ın 2015-ci ilin ən yaxşısı, 30 ölkədə Redaktor seçimi və 100-dən çox ölkədə Ən yaxşı Yeni oyun mükafatına layiq görülüb. 43 ölkədə 1 nömrəli puzzle və macəra oyununa çatdı və bir PAX Aus Indie vitrin qalibi seçildi!

Gizli Ruby La Rouge.

Niyə Birlik?

Əvvəla, niyə oyunumuzu qurmaq üçün Birlik oyun motorunu seçdik? Həm Jeyson, həm də mən illərdir əvvəlki işimizdə Birlikdən istifadə etdik və bir sənətkar olaraq şəxsən işləmək çox asan olduğunu düşünürəm. Kiçik indie şirkətimiz üçün ən böyük müsbət cəhət odur ki, sadəcə bir dəfə inkişaf edib bir çox platformaya yerləşdirə bilərik. Layihənin əvvəlində ağıllısınız və planlarınızı həssaslıqla işləməyi planlaşdırırsınızsa, bu, bir platformadan digərinə keçmək deməkdir.

Agent A ilə yalnız UI cavab vermir, həm də 3D kamera görünüşü də yaxşıdır. 16: 9 ilə 4: 3 arasında hər bir mənzərəni oyunumuzun kiçik telefonlardan, böyük tabletlərdən və televizorlardan istənilən ekran ölçüsündə oynamasına imkan verən vacib hit zonalarını kəsmədən tərtib etdik.

Bunu etmək üçün, orijinal səhnə dizaynlarında, kolleksiya materialları və ya portallar kimi vacib bir şeyin təhlükəsiz bölgəmizdən kənara çıxmadığından əmin olmaq üçün təlimatlardan istifadə etdim.

Təhlükəsiz zonadan kənarda olan əşyalar müxtəlif cihazlarda səhnə tərəzisi kimi kəsiləcək.

Təhlükəsiz zona, heç vaxt fərqli ekran ölçülərində kəsilməyən sərhədlər içərisindədir. Həmişə ekrana uyğun tərəzi. Beləliklə, Samsung Galaxy S6 kimi geniş bir cihazda etibarlı bölgə ekranın yuxarı və alt hissəsinə dəyənə qədər miqyas alacağıq və sonra dayanacağıq, bu tərəflərdəki mənzərəni bir az daha aşkar edər. Bir iPad kimi hündür bir cihazda, tərəflərə yayılır və ekranın yuxarı və alt hissəsində bir az daha aşkar edilərdi.

Səhnəni ölçmək, oyunçuya çox kiçik bir ekranda oynasalar da, oyunda vacib olan hər şeyi asanlıqla görməyə imkan verir.

Nədən başlamaq lazımdır?

Vizual üslubumuzu marketinq aləti kimi istifadə etmək üçün sənətin yaradıcılığına daxil olmağına çox vaxt ehtiyac duyduğumuzu bilirdik, buna görə prosesi sadələşdirmək bizim vaxtlarımız üçün çox vacib idi.

Əvvəla, oyunumuzun 3D olmasına baxmayaraq, bütün sənət əsərləri əvvəlcə 2D-də hazırlanmışdır. Bunun səbəbi iterasiya prosesini sürətləndirməkdir. Bir elementi sadəcə eskiz etmək və planlaşdırmaq üçün digər bütün elementlərlə (toxumalar, işıqlandırma, hit zonaları, portallar, kolleksiyalar, bulmacalar və ümumi görünüş) hazırlamaqdan daha çox vaxt tələb olunur, hər bir səhnə üçün çox iterasiya tələb olunurdu. .

İlk addım.

Hər bir səhnə üçün ilk addım arayış görüntülərini axtarmaq idi. Başlanğıc üçün ilkin istiqamət vermək üçün bu addım həqiqətən əlverişlidir, əksər hallarda dizaynın ən çətin hissəsi yalnız bir başlanğıc etməkdir. 60-cı illərdən ilham almış bir casus oyunu olmaqdan bütün səhnələrin o Connery-Bond dövrü hissini ələ keçirməsini istədim. Əhval lövhələri yaratmaq üçün memarlıq, film və ya 50/60-cı illüstrasiyalardan hər bir mənzərə üçün istinad kimi istifadə edilə bilən görüntüləri topladım (və ya Pinterest-də bağlandım).

Bütün istinad görüntüləri Pinterest-də tapıldı.

Doodlin '

Arayış toplanandan sonra kağız üzərində bir neçə kobud eskiz düzeni seçimlərini eskiz etdim. Təqdim etmək üçün planlardan birini seçdikdən sonra biraz daha ətraflı eskiz etmək üçün Wacom və Photoshop-dan istifadə edərdim.

Balaca ucu.

Bu yaxınlarda bir iPad pro + Qələm aldıq. Bir sözlə, sənət prosesinizi sürətləndirmək istəyirsinizsə, bu cihaz inanılmazdır. Rəqəmsal bir rəsm proqramı olan Procreate ilə cütləşdirdiyiniz zaman, eskiz fikirlərinin çox daha sürətli və həqiqətən daha xoş göründüyünü görürsən, çünki bu qədər dəqiq, kağızdan daha sürətli silmək və ya dəyişdirmək üçün böyük UX var və cihaz da portativdir. buna görə masanızla məhdudlaşmırsınız.

http://procreate.si/

Rəng / İşıqlandırma lağ edir.

İlkin dizayn eskizi ilə xoşbəxt olduqdan sonra səhnənin ümumi rənglərini və işıqlandırmasını tərtib etdim ki, son mockupu edərkən bunları nəzərə alım. Pixars dizayn prosesindən bu şəkildə işləmək fikri və hər bir vuruş üçün əhval-ruhiyyəni yaxşılaşdırmaq üçün filmləri üçün Rəng skriptlərini necə yaratmağı düşündüm. http://pixar-animation.weebly.com/colour-script.html

Bu dizaynları hamısını Photoshop daxilində vektor şəklində edirəm. Vektor formalarından istifadə edərək rəngləri çox tez cırmaq və Illustrator əvəzinə Photoshop istifadə edərək ümumi rəng sxemini çimmək üçün 'Color Balance' kimi əla qat tənzimləmə xüsusiyyətlərindən istifadə edə bilirəm.

Final 2D Mockup.

Son mockup, eskizlərim və əlavə detallar, toxumalar və son işıqlandırma ilə rəngli lokmaların birləşməsidir. Hazırkı mərhələdə toxunuşda daha ətraflı məlumat verməyə başladığımda ümumi düzenin ətrafında dəyişməsi nadir deyil. Agent A üslubuna nail olmaq üçün çoxlu açılardan istifadə edirəm. Köhnə Bond film dəsti dizaynlarının çoxunda fərq etdiyim bir şeydir. Bucaq otağın həndəsəsi ilə və hadisə yerindən işıq kəsməklə əldə edilə bilər. Gördüyünüz kimi, foye səhnəsi üçün son bir plan qurmadan əvvəl bir neçə fərqli konfiqurasiyanı sınamışam.

2D sənətindən 3D modellərinə qədər.

UI və bəzi animasiyalardan başqa, Agent A tamamilə 3D formatındadır. Bunun bir neçə səbəbi var, lakin əsas səbəb həm performansa, həm də tətbiq sənəd ölçüsünə görə səmərəlilikdir. 3D seçərək, hər bir səhnə təxminən 30 mb 2D sənətindən 500 kb üstəgəl minimal doku (biraz aşağıda izah etdiyim) bir FBX-dən gedir. 3D-də ayrı-ayrı səhnələr kimi dizayn etmək və daha çox fayl ölçüsünü əlavə etmək üçün fərqli olaraq yaxınlaşmalar üçün böyütə bilirik.

Əvvəlcədən, eskiz mərhələsində, Jasonun bundan sonra inkişafına başlaya biləcəyi hər bir mənzərənin çox sadə boz rəngli modellərini yaradırıq. Bu, sənət və inkişafın eyni zamanda istehsalda olmasına imkan verir.

Budur, son bir modelə qarşı erkən boz qutu modelinə misal:

Son 2D mockup, 3D səhnə modelinə istinad olaraq istifadə olunur. Bu mərhələdə xəbərdar olmaq lazım olan bir şey, 2D-dən 3D-yə hər şeyin təkrarlanmamasıdır, buna görə də modelin mümkün qədər 2D-ə yaxın görünməsini hədəfləyirik.

Seçdiyimiz 3D paketimiz Blenderdir, pulsuz olduğuna və ehtiyaclarımızın çoxunu əhatə etdiyinə görə kifayət qədər güclüdür. Blender-də modelləşdirmə zamanı ümumi mənzərənin işıqlandırılması haqqında bir fikir əldə etmək üçün bir işıq quraşdırırıq, bu, üzərində hərəkət edərkən və Birlik içərisində görünüşü düzəltməyə çalışarkən asanlaşır.

İşıqlandırma, rəngləmə və toxuma - texniki yarıqlı.

Blenderin içərisində son modelin niyə qəribə rənglərə sahib olması ilə maraqlanırdınız, çünki son rənglər və toxumaların hamısı tamamilə Birlik içərisində edilir. Bunun səbəbi, gördüklərinizin Birliklə əldə etdiklərinizdir. Belə bir asan redaktoru və Jasonun yaratdığı şaderləri istifadə etmək çox sadədir, buna görə sürətli yol Birlik daxilində bütün rəngləmə / toxuma işləməyi və ikiqat işləməyin qarşısını aldı (Blenderdə rəngləmə, sonra rəngləri çırpmaq) Birlik içərisində fərqli bir işıqlandırma qurğusu).

Agent A-nın bədii üslubu bir çox gradient ehtiva edir, buna görə səmərəli şəkildə Birlik daxilində bu gradientləri yaratmaq üçün bir yola ehtiyac duyacağımız aydın oldu. İş vaxtında qradiyentləri çəkmək üçün bir şader istifadə etmək hər səhnəyə çox yer qatılardı və həqiqətən Agent A-nın mümkün qədər çox xüsusi cihazlarda işləyə biləcəyinə əmin olmaq istədik. Jason uzanan və bir gradient yaradan kiçik piksel toxumalarından istifadə etmək üçün bir həll yolu tapdı. Photoshop-da 1px yüksək bir şəkil yaradıram və daha çox üfüqi piksel əlavə edirəm, məsələn, Qara rəngdən Ağa düz bir boz miqyaslı keçid 1px Ağın yanında 1px Qara olacaq. Birlik içərisində kiçik bir toxumalarımızla biləkli süzgəcdən istifadə edirik, bütün bir mesh üzərində uzananda hamar bir gradient verir. Daha sonra Jason, shader-ə fırlanan bir sürüşmə əlavə etdi ki, təyin edilmiş üzə 360 dərəcə bükülə bildim, bu da 2D qradient sənətimi sınamağa və yaymağa imkan verdi.

Budur, 3200% böyüdülmüş 2 piksellik bir toxuma nümunəsi:

Bir materiala tətbiq edildikdən sonra Birlik içərisində necə görünər:

İpucu: Dokularınızın kənarından qanaxma aradan qaldırılması üçün Sarmalma rejimi altında müfəttişdə sıxıldığına əmin olun.

Shader, Birliyin irsi dağınıq və ya açılmayan şaderlərdən qaynaqlanır və Jason fırlanma UV-larını yaratmaq üçün öz kodlarını bir az əlavə etdi:

// kaydırıcıyı xassəsi [0 - 2xPI] _Rotasiya ("Dönmə", Menzil (0.0, 6.2831853071)) = 0.0
// şaderiniz üçün bir vertex funksiyasını təyin edin #pragma səthi səthi Lambert vertex: vert
// fırlanan dönüşümlü bir matris şamil tətbiq edin _Rotation; boşluq vert (appdata_full v daxilində) {v.texcoord.xy - = 0.5; float s = sin (_Rotation); float c = cos (_Rotasiya); float2x2 fırlanmaMatrix = float2x2 (c, -s, s, c); fırlanmaMatrix * = 0.5; fırlanmaMatrix + = 0,5; rotationMatrix = fırlanmaMatrix * 2-1; v.texcoord.xy = mul (v.texcoord.xy, fırlanmaMatrix); v.texcoord.xy + = 0.5; }

UB xəritəsinə qəribə bir yol ...

Fırlanma sürüşməsinin işləməsi üçün UV-lərinizi bir az qeyri-adi şəkildə silmək lazımdır. Bir cismin hər üzü düz düzəldilməməli və bütün UV xəritəsini doldurmalıdır. Bu o deməkdir ki (düzgün işlənmiş olsanız) bütün üzləri seçib eyni zamanda UB-lərinə baxsaydınız hamısı bir-birinin üstündə oturacaqdı.

Ənənəvi UV xəritəsini belə etmək istəmirik:

İdarəetmə panelinin bütün üzləri seçilmişdir.

İstədiyimiz, üst-üstə düşən üzlərin bu sevimli qarışıqlığıdır:

Yenidən idarəetmə panelinin bütün üzləri seçildi.

Hər fərdi üzü seçərkən çox gözəl görünəcəkdir:

Yalnız idarəetmə panelinin ön üzü seçilir.

Bu üsulla nəzarət etmək istədiyiniz hər bir üz modelinizdə ayrıca bir materiala ehtiyac duyacaqdır. Beləliklə, Birlikdə obyekt seçdiyiniz zaman hər üzün rəngini, gradientini və toxumasını idarə etmək üçün istifadə edə biləcəyiniz çox sayda material var.

İdarəetmə panelində quraşdırılmış bir neçə material.Birlik içərisində son rənglər. Yuxarıda sarılmayan eyni ön üz boyunca işləyən gradientə diqqət yetirin.

İşıqlandırın.

Bir səhnə üçün bir istiqamətli işıq və bəzən əlavə bir nöqtənin işığının çərçivə sürətini azaltmadan onu cibdə itələyə biləcəyimizin həddi olduğunu gördük. Yandırılmamış əvəzinə mümkün qədər yayındırıcı kölgə istifadə etməyə çalışmağımızın səbəbi, səhnədəki əşyaların ətrafında hərəkət edərkən, məsələn, rəsm əsəri boyunca gizli bir casus konsolu üçün istiqamətləndirici işığdan zamanlı kölgələrdən istifadə edə bilməyimizdir.

Ətraf mühitin işığı ümumiyyətlə orta tonda boz rəngə qoyulur, lakin bəzən əşyalara rəng vermək üçün məsələn biraz rəng əlavə edirəm, məsələn səhnəni bir az isti hiss etmək üçün bir az sarı.

Dokulu.

Bədii üslubda olan dokular bənzərsiz üslubun yaradılmasında böyük rol oynayır. Bütün toxumalar ya real fotoqrafiyadan, ya Photoshop-da sıfırdan boyanmış və ya qarışıqdan (PhotoChopped). Daha sonra obyektə tətbiq olunan yol, Jasonun shader içərisindəki bir kanal vasitəsilə. Bundan sonra bütün müxtəlif şaderlərə tətbiq olunan 2 variant var (diffuz, işıqsız və s.). Doku qarışığı üçün 2 seçim Çarpma və Əlavədir. Əldə etməyi hədəflədiyim xüsusi görünüşdən asılı olaraq çoxsaylı və ya aşqarlı bir kanal olan bir şader seçərdim və sonra toxumamı yuvaya atardım. Bu toxuma yuvası 360 dərəcə fırlanan kaydırıcıyı və həmçinin Çarpan və ya Əlavə toxuma qarışığının gücünü idarə etmək üçün bir sürgüçiyə də sahibdir. Çarpma / Aşqar yuvası, bundan sonra baza yuvasına düşdüyünüz toxumanın üstünə tətbiq ediləcək bir gradient ilə də istifadə edilə bilər.

Foyedəki şaderlərin necə istifadə olunduğuna dair bəzi nümunələr:

Bu Ceysonun şaderindən Çarpan və Əlavə etmə üçün əlavə toxuma yuvasına əlavə etmək üçün başqa bir kod parçasıdır:

boş boş səth (Giriş IN, SurfaceOutput o daxilində) {// qeyd: toxumaları vahid bir səth kölgəsində pass yarısında birləşdiririk c4 = rəng = * tex2D (_MainTex, IN.uv_MainTex); // baza toxuması və rəng c * = (tex2D (_Müxtəlif, IN.uv2_Multiply) * _MüxtəliflikStrength) + (1.0f-_MultiplyStrength); // toxuma çoxaltmaq o.Albedo = c.rgb; o.Alpha = ca; }
etibarsız sörf (Giriş IN, SurfaceOutput o daxilində) {yarı4 c = _Color * tex2D (_MainTex, IN.uv_MainTex); // əsas toxuma və rəng c + = tex2D (_ Əlavə, IN.uv2_Additive) * _AdditiveStrength; // aşqar toxuması o.Albedo = c.rgb; o.Alpha = ca; }

Və nəhayət burada oyun foye səhnə sənətidir:

Nəticə.

Beləliklə, Birlikdə Agent A sənət üslubunu yaratmaq üçün bütün addım-addım addım atırıq. Ümid edirik ki, bu bələdçinizi kiçik bir şəkildə faydalı hesab etdiniz! Bundan bir şey götürməyiniz halında, sizdən eşitmək istərdik, xahiş edirəm Twitter-də salam söyləyin!

Mark White @elwhiteo

Jason Rawlings @JasonRawlings

'Agent A: Gizlənmədə bir tapmacan' haqqında daha çox məlumatı burada tapa bilərsiniz: www.agentagame.com

www.yakand.co