Գործակալության ստեղծում Արվեստի ոճը միասնության մեջ

Ներթափանցեք Ռուբի Լա Ռուժի գաղտնի գոտին Գործակալ Ա-ում. Քողարկված քողարկում:

Մարկետինգը հաջող անհատական ​​խաղ ստեղծելու ամենակարևոր կողմերից մեկն է: Հաճախ որպես շուկայավարման գործիք անտեսող տարրը պարզապես ձեր խաղային արվեստն է: Արվեստի յուրօրինակ և գեղեցիկ ոճը ոչ միայն կօգնի ձեզ խանութում վաճառք ձեռք բերել, այլ նաև կօգնի գրավել մամուլի ուշադրությունը և ամենակարևորը ՝ այն խմբագիրներին, ովքեր ընտրում են ձեր խաղն առանձնահատկացնելու համար: Այս հոդվածում մենք զննում ենք քայլ առ քայլ ՝ սկսած թղթից մինչև վերջնական արվեստ, դեպի այն, ինչն անհրաժեշտ է ՝ Գործակալ Ա – ի արվեստի ոճը դեպի Միասնություն ունեցող շարժական սարքեր բերելու համար, և հուսով եմ, որ որոշ օգտակար պատկերացումներ կտան ցանկացող ծրագրավորողներին:

Իմ անունը Mark White- ն է, ես Yak & Co- ի գեղարվեստական ​​ղեկավարն եմ և Jեյսոն Ռաուլլինսի (Առաջատար ծրագրավորող) կողքին մենք մշակեցինք «Գործակալ A. Մի քողարկված քողարկվածը», լրտես թեմաներով հանելուկ խաղ iOS- ի, Android- ի և… shoePhones- ի համար:

Agent A- ն արժանացավ Apple- ի լավագույններից մեկը 2015-ին, 30 երկրներում խմբագիրների ընտրությունը և ավելի քան 100 երկրներում լավագույն նոր խաղը: Այն հասավ թիվ 1 հանելուկ և արկածային խաղ 43 երկրներում և ընտրվեց որպես PAX Aus Indie Showcase- ի հաղթող:

Քմահաճ Ռուբի Լա Ռուժ:

Ինչու միասնություն:

Առաջին հերթին, ինչու մենք ընտրեցինք Unity խաղային շարժիչը `մեր խաղը կառուցելու համար: Թե՛ Jեյսոնը, և՛ ես, միասնություն ենք օգտագործել երկար տարիներ մեր նախորդ գործերում, և որպես նկարիչ անձամբ ինձ համար շատ հեշտ է աշխատել: Մեր փոքր ինդի ընկերության համար ամենամեծ դրականն այն է, որ մենք կարող ենք պարզապես մեկ անգամ զարգանալ և տեղակայվել շատ հարթակներում: Եթե ​​ծրագրի սկզբում խելացի եք և պլանավորում եք ձեր դասավորությունը `պատասխանատու աշխատելու համար, դա նշանակում է, որ մեկ պլատֆորմից մյուսը անցնելն ավելի հեշտ կլինի:

Գործակալ A- ի օգնությամբ ոչ միայն UI- ն է պատասխանատու, այլ նաև տեսախցիկի 3D տեսքը: Մենք նախագծեցինք յուրաքանչյուր տեսարան ՝ 16: 9-ից 4: 3-ը ընկած ժամանակահատվածի միջև, առանց կտրելու որևէ կարևոր հիթային գոտիներ, ինչը թույլ է տալիս մեր խաղին խաղալ ցանկացած էկրանի չափի փոքր հեռախոսներից ՝ մեծ հաբեր և հեռուստացույց:

Դա անելու համար, բեմի բնօրինակ ձևավորումներում ես օգտագործեցի ուղեցույցներ ՝ համոզվելու համար, որ հավաքածուի կամ պորտալի պես կարևոր ցանկացած բան դուրս չի գա մեր անվտանգ գոտուց:

Անվտանգ գոտուց դուրս գտնվող օբյեկտները կկտրվեն, քանի որ տեսախցիկները կշեռք են ունենում տարբեր սարքերի վրա:

Ապահով գոտին սահմանն է այն սահմաններում, որը երբեք չի կտրվում էկրանի տարբեր չափերից: Միշտ է կշեռքը էկրանին տեղավորելու համար: Այսպիսով, Samsung Galaxy S6- ի նման լայնածավալ սարքի վրա մենք մասշտաբելու ենք, քանի դեռ անվտանգ գոտին չի հարվածի էկրանին վերևի և ներքևի մասում, այնուհետև կանգ կառնի, սա կբացահայտի կողմերի տեսարանի մի փոքր ավելին: IPad- ի նման ավելի բարձր սարքի վրա այն մասշտաբի էր դուրս գալիս կողմերից և կանգ էր առնում ՝ բացահայտելով էկրանի վերևի և ներքևի մասում մի փոքր ավելին:

Տեսարանի մասշտաբը թույլ է տալիս խաղացողին հեշտությամբ տեսնել այն ամենը, ինչ կարևոր է խաղի մեջ, նույնիսկ եթե նրանք խաղում են շատ փոքր էկրանին:

Որտեղ սկսել:

Մեր վիզուալ ոճը որպես մարքեթինգային գործիք օգտագործելու համար մենք շատ ժամանակ գիտեինք, որ արվեստի ստեղծման համար հարկավոր է համոզվել, որ այն առանձնանում է, ուստի գործընթացը արագացնելը շատ կարևոր էր մեր ժամկետների համար:

Նախևառաջ, չնայած մեր խաղին `3D- ում, արվեստի բոլոր գործերն ի սկզբանե նախագծված են 2D- ում: Դրա պատճառն այն է, որ արագացվի կրկնության գործընթացը: Նյութը մոդելավորելու համար շատ ավելի շատ ժամանակ է պահանջվում, քան այն պարզապես ուրվագծել դրա մեջ և պլանավորել բոլոր մյուս տարրերը (հյուսվածքներ, լուսավորություն, հիթային գոտիներ, պորտալներ, կոլեկցիոներներ, հանելուկներ և ընդհանուր տեսք) յուրաքանչյուր բեմի համար պահանջվել է մեծ բազմացում: .

Առաջին քայլը:

Յուրաքանչյուր տեսարանի համար առաջին քայլը տեղեկանքների որոնում էր: Այս քայլը իսկապես օգտակար է ձեզ գաղափարներ տալու համար նախնական ուղղությամբ ղեկավարվելու համար, հաճախ դիզայնի ամենադժվար մասը հենց սկզբից է: Լինելով 60-ականների ոգեշնչված լրտեսական խաղ, ես ուզում էի, որ բոլոր տեսարանները գրավեին այդ Connery-Bond դարաշրջանի տեսակը: Ես հավաքեցի (կամ կապեց Pinterest- ի պատկերները), որոնք կարող էին օգտագործվել որպես ճարտարապետության, կինոնկարի կամ 50/60-ականների նկարազարդման յուրաքանչյուր տեսարանի համար նկարագրություն `տրամադրության տախտակներ ստեղծելու համար:

Բոլոր տեղեկատու պատկերները հայտնաբերված են Pinterest- ում:

Դուդլին

Հղումը հավաքելուց հետո ես գծագրեցի մի քանի կոպիտ մանրապատկերների դասավորության ընտրանքներ թղթի վրա: Հետևելու համար դասավորության ձևերից մեկը ընտրելուց հետո ես կօգտագործեի Wacom և Photoshop ՝ դրանք մի փոքր ավելի մանրամասն նկարագրելու համար:

Փոքրիկ հուշում:

Վերջերս մենք ձեռք բերեցինք iPad Pro + Pencil: Մի խոսքով, եթե ցանկանում եք արագացնել ձեր արվեստի գործընթացը, այս սարքն անհավատալի է: Երբ զուգավորում եք Procreate- ին ՝ թվային նկարչության հավելվածին, դուք կգտնեք, որ ուրվագծային գաղափարները դառնում են շատ ավելի արագ և իրականում նաև ավելի հաճելի, քանի որ այն այնքան ճշգրիտ է, արագորեն ջնջել կամ փոխել, քան թուղթը, ունի հիանալի UX և սարքը նաև դյուրակիր: այնպես որ դուք չեք սահմանափակվում ձեր աշխատասեղանին:

http://procreate.si/

Գույն / լուսավորության ծաղրեր:

Մի անգամ երջանիկ լինելով նախնական դասավորության էսքիզից, ես նախագծեցի տեսարանի ընդհանուր գույներն ու լուսավորությունը, որպեսզի վերջիններս հաշվի առնեմ վերջնական ծաղրուծանակն անելիս: Ես գաղափար ստացա աշխատել այս եղանակով Pixars նախագծման գործընթացից և այն մասին, թե ինչպես են նրանք ստեղծում Գունավոր սցենարներ իրենց կինոնկարների համար `օգնելու համար գրավել տրամադրությունը յուրաքանչյուր կրակոցի համար: http://pixar-animation.weebly.com/colour-script.html

Այս բոլոր նմուշները ես անում եմ վեկտորային ձևերով `Photoshop- ի ներսում: Վեկտորի ձևերը օգտագործելով `կարողանում եմ շատ արագ կսմթել գույները և Illustrator- ի փոխարեն Photoshop- ի միջոցով օգտագործելով` ես ի վիճակի եմ օգտագործել շերտի ճշգրտման հիանալի հատկություններ, ինչպիսիք են `« Գույնի հաշվեկշիռը »` ընդհանուր գունային սխեման հանելուկ:

Վերջնական 2D վարկածը:

Վերջնական ծաղրանկարն իմ ուրվագծերի և գունային ծաղիկների համադրություն է `ավելացված մանրամասներով, հյուսվածքով և վերջնական լուսավորությամբ: Այս փուլում հազվադեպ չէ, որ ընդհանուր դասավորությունը փոխվի, քանի որ սկսում եմ ավելի մանրամասն ավելացնել: Գործակալի ոճին հասնելու համար ես օգտագործում եմ շատ անկյուններ: Դա մի բան է, որը ես նկատեցի հին Bond կինոնկարի նախագծերի մեծ մասում: Անկյունները կարելի է հասնել սենյակի երկրաչափության և տեսարանի միջոցով լույսի կտրման միջոցով: Ինչպես տեսնում եք այստեղ, ես փորձեցի մի քանի տարբեր կոնֆիգուրացիաներ, նախքան տեղավորվելով նախասրահի վերջին դասավորությանը:

2D արվեստից մինչև 3D մոդելներ:

Բացի UI- ից և որոշ անիմացիայից, Agent A- ն ամբողջությամբ 3D է: Դրա համար կան մի քանի պատճառ, բայց հիմնական պատճառն արդյունավետությունն է ՝ ինչպես կատարողականի, այնպես էլ հավելվածի ֆայլի չափի համար: Ընտրելով 3D, յուրաքանչյուր տեսարան անցնում է 2D արվեստի մոտ 30mb- ից մինչև FBX ՝ մոտ 500 կբ / և նվազագույն հյուսվածքներ (ինչը ես բացատրում եմ ստորև): 3D- ում մենք նաև ի վիճակի ենք մեծացնելու համար closeup- ները, հակառակ այն բանի, որ դրանք պետք է նախագծվեն որպես առանձին տեսարաններ և ավելացնենք ֆայլի ավելի մեծ չափսը:

Վաղ էսքիզների փուլում մենք ստեղծում ենք յուրաքանչյուր տեսարանի շատ պարզ գորշ տուփ մոդելներ, որոնց միջոցով asonեյսոնը կարող է սկսել զարգանալ: Սա թույլ է տալիս, որ արվեստը և զարգացումը միաժամանակ լինեն արտադրության մեջ:

Ահա վաղ մոխրագույն տուփի մոդելի օրինակ `վերջնական մոդելի դեմ.

Վերջնական 2D ծաղրումը օգտագործվում է որպես 3D տեսարան մոդելավորելու հղում: Մի բան, որ պետք է տեղյակ լինել այս փուլում, այն է, որ ամեն ինչ չէ, որ կարող է վերարտադրվել 2D- ից մինչև 3D, այնպես որ մենք պարզապես նպատակ ենք դնում, որ մոդելը հնարավորինս մոտ գտնի 2D- ին:

Մեր ընտրության 3D փաթեթը Blender է, այն բավականին հզոր է ՝ համարելով այն անվճար և ընդգրկում է մեր կարիքների մեծ մասը: Blender- ում մոդելավորելիս մենք ստեղծում ենք մեկ լույս `մոտավորապես պատկերացում կազմելով տեսարանի ընդհանուր լուսավորության մասին, սա ավելի հեշտացնում է այն ժամանակ, երբ տեղափոխվում և փորձում եք տեսքը կարգավորել Միասնության մեջ:

Լուսավորություն, գունավորում և հյուսվածք - տեխնիկական նիտրական մանրախոտ:

Եթե ​​մտածում եք, թե ինչու է վերջին մոդելը որոշ տարօրինակ գույներ Blender- ի ներսում, դա այն է, որ բոլոր վերջին գույներն ու հյուսվածքները ամբողջությամբ կատարվում են «Միասնության» ներսում: Դրա պատճառն այն է, որ այն, ինչ տեսնում եք, այն է, ինչ ստանում եք «Միասնության» հետ: Այն ունի այնպիսի հեշտ օգտագործման համար խմբագիր և shaders, որ asonեյսոնը ստեղծեց նաև շատ պարզ է օգտագործման համար, այնպես որ ամենաարագ ճանապարհը ավարտվեց այն է, որ ամբողջ Unity- ում ներկված բոլոր ներկերի / հյուսվածքների կատարումը և խուսափել ցանկացած կրկնակի բեռնաթափումից (Blender- ում գունավորում) տարբեր միանգամայն լուսավորություն Միավորի ներսում):

Գործակալ Ա-ի արվեստի ոճը պարունակում է շատ գրադիենտներ, ուստի վաղ առերևույթ ակնհայտ էր, որ մեզ անհրաժեշտ կլինի միասնություն `այդ Միավորության ներսը արդյունավետ ձևով ստեղծելու համար: Օգտագործելով shader գծապատկերները ժամանակի ընթացքում գործնականում գրադիենտներ կավելացներ, ամեն մի տեսարան պետք է ավելացներ մեծ գլխավերևում, և մենք իսկապես ուզում էինք համոզվել, որ գործակալը A- ն կարող է գործարկել հնարավորինս շատ ցածր հատուկ սարքերի վրա: Asonեյսոնը լուծում գտավ ՝ օգտագործելու փոքրիկ պիքսելային հյուսվածքներ, որոնք ձգվում են և ստեղծում են գրադիենտ: Photoshop- ում ես ստեղծում եմ 1px բարձր պատկեր և ավելացնում այնքան հորիզոնական պիքսելներ, որքան ես պետք է ստեղծեմ գրադիենտը, օրինակ `սևից սպիտակ գույնի սահուն սանդղակի անցումը պարզապես կլիներ 1px սև 1px White- ի կողքին: Ներքին Միասնության մեջ մենք այն օգտագործում ենք երկբևեռ զտիչ մեր փոքրիկ հյուսվածքով, որը, երբ ձգվում է ամբողջ ցանցի միջոցով, ձեզ տալիս է հարթ գրադիենտ: Այնուհետև Jեյսոնը ստվերիչին ավելացրեց պտտվող սահնակ, որպեսզի ես կարողանամ գրադիենտ գրադիենտ 360 աստիճան պտտեցնել այն նշանակված դեմքին, ինչը թույլ տվեց ինձ փորձել և վերարտադրել իմ 2D գրադիենտ արվեստը:

Ահա 3200% խոշորացված 2 պիքսել հյուսվածքի օրինակ.

Ահա թե ինչպես է այն հայտնվում ներսում Միասնության մեջ, երբ այն կիրառվում է նյութի վրա.

Հուշում. Համոզվեք, որ ձեր հյուսվածքը փաթաթված ռեժիմով կարգավորիչի վրա դրված է սեղմակի վրա `եզրերից արյունահոսությունը հեռացնելու համար:

Shader- ը հիմնված է Unity- ի ժառանգության ցրված կամ անջատիչ shaders- ի վրա, և asonեյսոնը մի փոքր ավելացրեց իր սեփական ծածկագիրը ՝ պտտվող ուլտրամանուշակագույն հոսքերը ստեղծելու համար.

// սայթաքող գույք [0-ից 2xPI] _Ռոտացիա («Պտտում», միջակայք (0.0, 6.2831853071)) = 0.0
// սահմանեք ուղղահայաց գործառույթ ձեր shader #pragma մակերևույթի ճամփորդության վրա Lambert vertex: vert
// կիրառել պտտվող տրանսֆորմացիայի մատրիցային բլոկ _ Ռոտացիա; void vert (inout appdata_full v) {v.texcoord.xy - = 0.5; float s = sin (_Rotation); float c = cos (_Rotation); float2x2 rotationMatrix = float2x2 (c, -s, s, c); rotationMatrix * = 0.5; rotationMatrix + = 0.5; rotationMatrix = rotationMatrix * 2–1; v.texcoord.xy = ցանքածածկ (v.texcoord.xy, rotationMatrix); v.texcoord.xy + = 0.5; }

Ուլտրամանուշակագույն քարտեզի տարօրինակ տարբերակ…

Որպեսզի պտտվող սլայդն աշխատի, ձեզ հարկավոր է քերել ուլտրամանուշակագույն ճառագայթները մի փոքր անսովոր ձևով: Յուրաքանչյուր օբյեկտի վրա պետք է լինի անսարք հարթ և լրացնել ամբողջ ուլտրամանուշակագույն քարտեզը: Դա նշանակում է, որ եթե (ճիշտ արված) լինեիք, ընտրեք բոլոր երեսները և միանգամից նայեք նրանց ուլտրամանուշակագույն ճառագայթներին, նրանք բոլորը նստած կլինեին միմյանց գագաթին:

Մենք չենք փորձում ավանդական ուլտրամանուշակագույն քարտեզ կազմել այնպես,

Ընտրվում են կառավարման վահանակի բոլոր դեմքերը:

Մեր ուզածը համընկնող դեմքերի այս գեղեցիկ խառնաշփոթն է.

Կրկին ընտրվում են կառավարման վահանակի բոլոր դեմքերը:

Յուրաքանչյուր անհատական ​​դեմք ընտրելիս շատ ավելի գեղեցիկ տեսք կունենա.

Ընտրվում է միայն կառավարման վահանակի առջևի դեմքը:

Այս մեթոդով յուրաքանչյուր դեմք, որի վրա ցանկանում եք վերահսկել, ձեր մոդելի մեջ պետք է ունենա առանձին նյութ: Այդ եղանակով, երբ ընտրում եք «Միասնության» օբյեկտը, դուք ունեք բազմաթիվ նյութեր, որոնք կարող եք օգտագործել `յուրաքանչյուր դեմքի գույնը, գրադիենտը և հյուսվածքը վերահսկելու համար:

Կառավարման վահանակի վրա տեղադրված նյութերից մի քանիսը:Վերջնական գույները ՝ «Միասնության» ներսում: Ուշադրություն դարձրեք, թե ինչ վազք է վազում նույն նույն առջևի երեսով, որը վերևում էր:

Լուսավորել.

Մենք հայտնաբերեցինք, որ յուրաքանչյուր ուղղության համար մեկ ուղղության լույս և երբեմն էլ լրացուցիչ կետային լույս այն սահմանաչափի մասին է, թե որքանով կարող ենք այն մղել բջջայինի վրա ՝ առանց շրջանակի արագությունը իջնելու: Պատճառն այն է, որ մենք փորձում ենք հնարավորինս օգտագործել դիֆուզիոն ստվերներ ՝ չմեղմելու փոխարեն, որպեսզի մենք կարողանանք իրական ժամանակի ստվերները օգտագործել ուղղության լույսից, քանի որ տեսարանների իրերը տեղաշարժվում են, օրինակ ՝ գաղտնի լրտեսական վահանակ, որը բացվում է նկարի հետևից:

Լրացուցիչ տեսարանները շրջապատող լույսը սովորաբար տեղադրվում են միջին տոնայնության գորշ գույնի մեջ, բայց երբեմն ես մի փոքր գույն եմ ավելացնում, որպեսզի չհամապատասխանեմ բաներին, օրինակ `մի քիչ դեղին, որպեսզի տեսարանը մի փոքր ավելի տաք լինի:

Հյուսվածքաբանություն:

Արվեստի ոճով հյուսվածքները մեծ դեր են խաղում եզակի ոճը ստեղծելու գործում: Բոլոր հյուսվածքները կամ իրական լուսանկարչությունից են, որոնք զրոյից ներկված են Photoshop- ում կամ խառնուրդով (PhotoChopped): Դրանք այնուհետև օբյեկտի կիրառման եղանակը asonեյսոնի սափրիչի ներսում գտնվող ալիքով է: Մենք ունենք 2 տարբերակ, որոնք այնուհետև կիրառվում են բոլոր տարբեր ստվերների վրա (դիֆուզիոն, անջատում և այլն): Հյուսվածքների խառնուրդի 2 տարբերակները բազմապատկիչ և հավելիչ են: Կախված այն առանձնահատուկ տեսքից, որը ես նպատակ ունեմ հասնել, ես կընտրեի ստվերատուփ, որն ուներ կամ Multiply կամ Additive ալիք, և այնուհետև կտոր-կտորս գցեց տողի մեջ: Այս հյուսվածքի բնիկն ունի նաև 360 աստիճանի պտտվող սողնակ և նաև սողնակ ՝ բազմապատկված կամ հավելանյութային հյուսվածքի խառնուրդի ուժը վերահսկելու համար: Բազմակի / հավելանյութի բնիկ կարող է օգտագործվել նաև գրադիենտով, որն այնուհետև կկիրառվի այն ամենի վերին մասի վրա, որը դուք իջել եք բազային անցք:

Ահա որոշ օրինակներ, թե ինչպես են ստվերները օգտագործվել ֆյայերի տեսարանում.

Սա ևս մեկ ծածկագիր է asonեյսոնի shader- ից `ավելացնել բազմապատկման և հավելանյութի լրացուցիչ հյուսվածքային բնիկ:

void surf (Input IN, inout SurfaceOutput o) note // նշում. մենք համատեղում ենք հյուսվածքները մեկ մակերևույթի վրա: // բազային հյուսվածք և գույն c * = (tex2D (_Multiply, IN.uv2_Multiply) * _MultiplyStrength) + (1.0f-_MultiplyStrength); // բազմապատկել հյուսվածքը o.Albedo = c.rgb; o.Alpha = ca; }
void surf (Input IN, inout SurfaceOutput o) {half4 c = _Color * tex2D (_MainTex, IN.uv_MainTex); // բազային հյուսվածք և գույն c + = tex2D (_Additive, IN.uv2_Additive) * _AdditiveStrength; // հավելանյութի հյուսվածք o.Albedo = c.rgb; o.Alpha = ca; }

Եվ, վերջապես, այստեղ է խաղասրահի բեմական արվեստը.

Եզրակացություն:

Ուրեմն մենք այնտեղ ունենք այն ՝ ամբողջ քայլ առ քայլ գործընթաց ՝ ստեղծելու համար Գործակալ A- ի ոճը Միասնության մեջ: Հուսով ենք, որ այս ուղեցույցը օգտակար եք գտել փոքր ինչպե՞ս: Եթե ​​դուք պատահում եք դրանից որևէ բան, մենք կցանկանայինք լսել ձեզնից, ուստի խնդրում եմ, ասեք, բարև ձեզ Twitter- ում:

Մարկ Ուայթ @elwhiteo

Jason Rawlings @JasonRawlings

«Գործակալ A. Քողարկված հանելուկ» հավելյալ տեղեկություններ կարելի է գտնել այստեղ ՝ www.agentagame.com

www.yakand.co