मैं चूल्हा पत्थर की तरह एनिमेटेड कार्ड ग्राफिक्स कैसे बना सकता हूं?

Question

खेल चूल्हा में, उन पर एनिमेटेड छवियों के साथ कार्ड हैं। कुछ उदाहरण:

1. http://www.hearthhead.com/card=281/argent-commander
2. http://www.hearthhead.com/card=469/blood-imp

एनिमेशन कई प्रभावों से बना प्रतीत होता है:

• कण प्रणाली।
• लुप्त होती स्प्राइट इन और आउट / रोटेटिंग
• सरल स्क्रॉलिंग टेक्स्ट
• एक विरूपण प्रभाव, उदाहरण के केप और बालों में बहुत स्पष्ट 1।
• घूमता धुआं प्रभाव, उदाहरण 1 में प्रकाश और उदाहरण 2 में हरा / बैंगनी चमक।

पहले तीन तत्व तुच्छ हैं, मैं जानना चाहता हूं कि अंतिम दो कैसे हो सकते हैं। यह भी एक खेल में realtime किया जा सकता है, या वे पूर्व गाया एनिमेशन हैं?

Comments

इसके शायद पहले से दर्ज किए गए एनिमेशन ताश के पत्तों में खेले जा रहे हैं ..

— ग्रिम्सहॉ

आपके पास ग्राफिकडेसाइन.स्टैकएक्सचेंज डॉट कॉम पर एक बेहतर मौका हो सकता है जो कि एक फ़ोटोशॉप या आफ्टरइफेक्ट्स जैसा दिखता है, रेंडर नहीं।

— क्रॉस्टर

मुझे यकीन नहीं है कि अगर मैं प्रश्न को माइग्रेट करने से सहमत हूं, लेकिन मेरे पास आपके लिए अनुवर्ती प्रश्न हैं, @Appeltaart: (1) क्या आप रुचि रखते हैं कि कला कैसे बनाई जाती है या क्या आप उस कोड में रुचि रखते हैं जो कला का प्रतिपादन करता है? ? (२) क्या आप विशेष रूप से पूछ रहे हैं कि ब्राउज़र गेम में इसे कैसे पूरा किया जा सकता है?

मुझे सबसे ज्यादा दिलचस्पी इस बात में है कि क्या और कैसे इन प्रभावों को रियलटाइम रेंडरिंग से हासिल किया जा सकता है। जैसे, मुझे कोड में सबसे ज्यादा दिलचस्पी है। सर्वसम्मति से लगता है कि चूल्हा स्वयं ही पूर्वगामी एनिमेशन का उपयोग करता है। आपके दूसरे प्रश्न के लिए, मैं इसे एक ब्राउज़र गेम में नहीं बल्कि आईओएस में लागू करना चाहता हूं।

— अप्पेलार्टार्ट

Answer 1

मैं नहीं जानता कि क्या इसकी प्रासंगिक कोई और है, लेकिन डौग जवाब यह सही है

मैं बस यह जोड़ना चाहता था कि मैं खुद एनिमेशन को फिर से बनाने में कामयाब रहा, जैसा कि वे खेल में बनाए गए हैं, यह एक ही संपत्ति का उपयोग करके स्वयं, यहां एक नज़र डालें

मग्न :

precision highp float;

uniform float uTime;
uniform sampler2D uSampler0;
uniform sampler2D uSampler1;
uniform sampler2D uSampler2;
uniform sampler2D uSampler3;
uniform sampler2D uSampler4;
uniform sampler2D uSampler5;
varying vec2 texCoords;

void main(void) {
  float t = uTime;
  vec3 mask = texture2D(uSampler1,texCoords).rgb;
  vec4 img = texture2D(uSampler0,texCoords);
  img.rg*=1.1;
  vec2 flow = texture2D(uSampler3,texCoords).gr;
  flow.y+=t*3.;
  vec4 plas = texture2D(uSampler2,flow*1.2) * mask.r;
  plas *= 15.5;
  plas *= vec4(0.239, 0.224,0.488,1.);
  vec2 ct = texCoords;
  ct.y -=t*0.5;
  vec4 clouds = texture2D(uSampler4,ct*2.);
  float clouds_a = clouds.a;
  clouds *= 4.5;
  clouds *= vec4(0.275,0.23,0.161,1.);
  clouds_a *= mask.b;
  img += clouds * mask.b;
  img += plas * mask.r ;
  img += (sin(t*15.)+1.) * mask.g * vec4(0.239, 0.224,0.488,1.)*2.;
  ct.x += t * 0.5;
  vec4 clouds_overall = texture2D(uSampler5,ct  * 0.5);
  clouds_overall *= vec4(0.275,0.23,0.161,1.);
  gl_FragColor = img +clouds_overall;
}

मेदिव :

precision highp float;

uniform float uTime;
uniform sampler2D uSampler0;
uniform sampler2D uSampler1;
uniform sampler2D uSampler2;
uniform sampler2D uSampler3;
uniform sampler2D uSampler4;
uniform sampler2D uSampler5;
varying vec2 texCoords;

void main(void) {
  float t = uTime;
  vec2 tc = texCoords;
  tc.x-=t*2.;
  vec4 mask = texture2D(uSampler1,texCoords);
  float bump = texture2D(uSampler4,tc*0.5).r; 
  vec4 img = texture2D(uSampler0,vec2(texCoords.x,texCoords.y+bump* 0.055 * mask.g));
  tc = texCoords;
  tc.x-=0.05;
  tc.y+= 0.05;
  vec2 flow = texture2D(uSampler3,tc).rg;
  flow.y+=t;
  flow.y*=2.;
  vec4 plasma = texture2D(uSampler2,flow*1.5);
  plasma.rgb *= vec3(0.52,0.26,0.54);
  plasma *= 3.;
  flow = texture2D(uSampler5,texCoords).rg;
  flow.g+=t;
  vec4 plasma2 = texture2D(uSampler2,flow);
  plasma2 *= 4.;
  plasma2.rgb *= vec3(0.52,0.26,0.54);
  gl_FragColor =img+plasma*mask.r+bump*mask.a*0.35+plasma2*mask.b;
}

Comments

यह वही है जो मैं देख रहा था, धन्यवाद! आपने यह तकनीक कहां से सीखी, इसे क्या कहा जाता है (प्लाज्मा?), और क्या इस पर कोई और संसाधन हैं (किताबें / लेख)?

— Appeltaart

मैं वास्तव में इसे अपने आप से बाहर निकालता हूं, यह 3 डी रेंडरिंग में कोने को मॉर्फ करने के समान है, लेकिन आप सीधे पिक्सेल के साथ खेलते हैं बजाय उन्हें स्व। खेलने के दौरान अलग-अलग तकनीकों के कुछ जोड़े हैं, उनमें से ज्यादातर बुनियादी हैं, जो मुझे लगता है कि आप देख रहे हैं, जिसे विस्थापन मानचित्रण कहा जाता है, इसे ज्यादातर एक बनावट का उपयोग करने के लिए जाना जाता है / घुंघराले को विस्थापित करने के लिए, लेकिन यहां मैंने एक बनावट का उपयोग किया है। पवन प्रभाव प्राप्त करने के लिए एक और बनावट को विस्थापित करें।

— डैनियल मेंडल

हे दान! क्या आपके पास मूल संपत्ति है जिसे आपने कहीं भी पोस्ट किया है? आपके डेमो लिंक अब निष्क्रिय हैं, और वेवबैक मशीन छवियों को कैश नहीं करती है। मैंने आपका उत्तर काफी समय के लिए बुकमार्क कर लिया है, लेकिन इस अध्ययन के लिए कभी भी निवेश नहीं किया है।

— ब्रैंडन सिल्वा

यहाँ प्रारंभ करें मैंने फाइलों को सहेजने के लिए नॉकट्रैक का इस्तेमाल किया, उन सालों पहले। उन्हें मिला! आपकी अनुमति के साथ, मैं उन्हें कहीं पोस्ट कर दूंगा, या यदि आपके पास अब नहीं है, तो मैं फाइलें पास कर सकता हूं और आप उन्हें रेपो, या कुछ और में बचा सकते हैं।

— ब्रैंडन सिल्वा

@BrandonSilva हां आप उन्हें पोस्ट कर सकते हैं, यह बहुत अच्छा होगा

— डैनियल मेंडल

Answer 2

कुछ विचार दिमाग में आते हैं और उनका कार्यान्वयन पूरी तरह से इंजन, उपकरण और, अंत में, काम और सामग्री पाइपलाइन पर निर्भर करेगा।

स्प्राइट एनीमेशन

1. फ़ोटोशॉप और आफ्टर इफेक्ट्स जैसे टूल का उपयोग करके एनीमेशन बनाएं
2. एक एटलस (स्प्राइट शीट) में फ्रेम द्वारा रेंडर फ्रेम
3. कोड द्वारा एनीमेशन लागू करें
4. यदि आवश्यक हो तो उचित मास्किंग या पारदर्शी पृष्ठभूमि का उपयोग करके कार्ड लेआउट को उसके ऊपर रेंडर करें।

वीडियो एनीमेशन

1. फ़ोटोशॉप और आफ्टर इफेक्ट्स जैसे टूल का उपयोग करके एनीमेशन बनाएं
2. खेल इंजन द्वारा पठनीय प्रारूप में उस वीडियो को निर्यात करें
3. कोड द्वारा एनीमेशन खेलें
4. यदि आवश्यक हो तो उचित मास्किंग या पारदर्शी पृष्ठभूमि का उपयोग करके वीडियो के शीर्ष पर कार्ड लेआउट रेंडर करें

इंजन में एनीमेशन

1. फ़ोटोशॉप जैसे टूल का उपयोग करके एनीमेशन के लिए सभी संपत्ति बनाएं
2. सभी परिसंपत्तियों के साथ इंजन के अंदर कार्ड मॉडल बनाएं
3. अपने कस्टम एनीमेशन संपादक का उपयोग करके इंजन का उपयोग करके चेतन करें और इसे सहेजें
4. जब आवश्यक हो कोड द्वारा एनीमेशन खेलते हैं

ये तीन प्रकार के एनीमेशन हैं जिनके बारे में मुझे पता है और मैंने इनके साथ काम किया है। प्रत्येक के लिए पेशेवरों और विपक्ष हैं, और इस विशेष मामले में मैं स्प्राइट और वीडियो एनीमेशन के लिए इच्छुक हूं, क्योंकि वे कम जीपीयू-गहन हैं।

इस तरह के मामलों में, सबसे सरल दृष्टिकोण शायद सही दृष्टिकोण है।

Answer 3

• ऐसा करने का एक तरीका सिर्फ बनावट के स्थान पर एक वीडियो का उपयोग करना है। उस वीडियो को पहले से तैयार करना होगा और लूपिंग करना होगा।

• एक और तरीका है कि पूरे "चरित्र, कण, केप हिलना" दृश्य को एक बफर में प्रस्तुत किया जाए जो बाद में फ्रेम रेंडरिंग में बनावट के स्थान पर उपयोग किया जाता है।

मुझे इस बात का कोई अनुभव नहीं है कि 3 डी इंजन में इन दोनों समाधानों को कैसे प्राप्त किया जाए, लेकिन मुझे लगता है कि दोनों एक 2 डी इंजन में संभव हैं (मुझे लगता है कि मैं उदाहरण के लिए एमओएआई में यह काम कर सकता हूं)।

Answer 4

4 और 5 दोनों यूवी द्वारा क्षेत्र पर एक बनावट को स्क्रॉल करते हुए किए जाते हैं, हो सकता है कि कार्ड के ऊपर एक जाल हो जो थोड़ा विकृत (स्थिर तरीके से) हो। लगता है कि रक्त में दूसरी बनावट भी है जो पहली बनावट को गुणा करती है और यूवी स्क्रॉल नहीं करती है।

कुल मिलाकर, वे महंगे प्रभाव नहीं हैं। वे सिर्फ उतने अच्छे नहीं हैं जितना कि वे पहली नज़र में देखते हैं।

Comments

4 और 5 का क्या जिक्र है?

— वेलनकोर्ट

"घूमता धुआं प्रभाव, उदाहरण 1 में प्रकाश और उदाहरण 2 में हरा / बैंगनी चमक"। मुझे लगता है कि विरूपण प्रभाव या तो चलती है या एक प्रक्रियात्मक है जो उन्हें रनटाइम पर बदलते हुए एक डिब्बाबंद एनीमेशन है। या यह एक बनावट के साथ एक नमूना हो सकता है जिसमें एक दूसरे यूवी स्क्रॉलिंग बनावट द्वारा पेश किया गया पूर्वाग्रह है।

— डग

Answer 5

लगभग सभी प्रभाव 2 डी कंकाल एनीमेशन उपकरण जैसे कि स्पाइन के साथ प्राप्त किए जा सकते हैं। एक स्प्राइट मूल रूप से एक 2 डी मेष पर एक बनावट है। मेष को तब केप मूव आदि बनाने के लिए तब्दील किया जाता है
। ऐसे प्रभावों के उदाहरण के लिए डेमो रील देखें। http://esotericsoftware.com/spine-in-depth#Features सबसे आम इंजन / भाषाओं के लिए रनटाइम हैं। एक समान उपकरण स्प्रिटर है: http://www.brashmonkey.com