আমি হার্টস্টোনের মতো অ্যানিমেটেড কার্ড গ্রাফিকগুলি কীভাবে তৈরি করতে পারি?

9

গেম হিয়ারথস্টোনটিতে, তাদের উপর অ্যানিমেটেড চিত্রগুলির সাথে কার্ড রয়েছে। কয়েকটি উদাহরণ:

অ্যানিমেশনগুলি একাধিক প্রভাব নিয়ে গঠিত বলে মনে হচ্ছে:

কণা সিস্টেম।
এগুলি আউট এবং আউট / আবর্তিত স্প্রেটগুলি বিবর্ণ করা
সরল স্ক্রোলিং টেক্সচার
একটি বিকৃতি প্রভাব, উদাহরণস্বরূপ কেপ এবং চুলের মধ্যে খুব স্পষ্ট।
ঘূর্ণি ধোঁয়া প্রভাব, উদাহরণ 1 এবং হালকা 2 উদাহরণে সবুজ / বেগুনি আভা।

প্রথম তিনটি উপাদান তুচ্ছ, আমি কী জানতে চাই যে শেষ দুটি কীভাবে করা যায়। এটি এমনকি কোনও গেমটিতে রিয়েলটাইমও করা যেতে পারে, বা এগুলি অ্যানিমেশনগুলি প্রাক-উপস্থাপিত হয়?

graphics

— Appeltaart
সূত্র

1

এটি সম্ভবত রেকর্ড অ্যানিমেশনগুলি কার্ডে বাজানো হচ্ছে ..

— গ্রিমশো

গ্রাফিকডিজাইন.স্ট্যাকেক্সেঞ্জ.কম এ আপনার আরও ভাল সুযোগ থাকতে পারে যা ফটোশপ বা আফটারএফেক্টের মতো দেখাচ্ছে, রেন্ডার নয়।

— ক্রোমস্টার

1

আমি যদি প্রশ্নটি স্থানান্তরের সাথে একমত হই তবে আমি নিশ্চিত নই, তবে আপনার কাছে আমার কাছে ফলো-আপ প্রশ্ন রয়েছে, @ অ্যাপল্টার্ট: (1) আপনি কীভাবে শিল্পটি তৈরি করেন তাতে আগ্রহী বা আপনি যে শিল্পটি রেন্ডার করে কোডটিতে আগ্রহী? ? (২) আপনি কী ব্রাউজার গেমটিতে এটি সম্পাদন করতে পারবেন তা সুনির্দিষ্টভাবে জিজ্ঞাসা করছেন?

আমি - এবং এই প্রভাবগুলি রিয়েলটাইম রেন্ডারিংয়ের মাধ্যমে কীভাবে অর্জন করা যায় তা সম্পর্কে আমি সবচেয়ে আগ্রহী। এর মতো, আমি কোডটিতে সবচেয়ে আগ্রহী। Sensক্যমত্য বলে মনে হয় যে হার্টস্টোন নিজেই যদিও পূর্বনির্ধারিত অ্যানিমেশনগুলি ব্যবহার করে। আপনার দ্বিতীয় প্রশ্ন হিসাবে, আমি এটি ব্রাউজার গেমটিতে প্রয়োগ করতে চাই না, তবে আইওএসেও।

— আপেল্টার্ট

7

এর প্রাসঙ্গিক আর কোনও কিনা তা আমি জানি না, তবে ডগ উত্তরটি এটি সঠিকভাবে পেয়েছে

আমি কেবল যুক্ত করতে চেয়েছিলাম যে আমি নিজেই অ্যানিমেশনগুলি ঠিক একই সম্পদ ব্যবহার করে গেমটিতে নির্মিত হওয়ায় এটি পুনরায় তৈরি করতে সক্ষম হয়েছিলাম, এখানে একবার দেখুন

মাগনি :

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;
}

Medivh :

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;
}

— ড্যানিয়েল মেন্ডেল
সূত্র

আমি ঠিক তাই খুঁজছিলাম, ধন্যবাদ! আপনি কোথায় এই কৌশলটি শিখলেন, যাকে বলা হয় (প্লাজমা?) এবং এর উপর আরও কোনও সংস্থান আছে (বই / নিবন্ধ)?

— আপেল্টার্ট

2

আমি আসলে এটি নিজে নিজেই আবিষ্কার করেছি, এটি 3 ডি রেন্ডারিংয়ে উল্টানো মোটা অংশের মতো, তবে আপনি সরাসরি সেগুলি পিক্সেলের সাথে সরাসরি খেলেন। খেলতে বিভিন্ন কৌশল রয়েছে, তাদের বেশিরভাগই বেসিক, আমার মনে হয় আপনি যা খুঁজছেন তাকে ডিসপ্লেসমেন্ট ম্যাপিং বলা হয়, এটি বেশিরভাগই বিন্যাসকে সরানোর / স্থানচ্যুত করার জন্য একটি টেক্সচার ব্যবহার হিসাবে পরিচিত, তবে এখানে আমি একটি টেক্সচার ব্যবহার করেছি বায়ুর প্রভাব পেতে অন্য টেক্সচারটি স্থানচ্যুত করুন।

— ড্যানিয়েল মেন্ডেল

আরে ড্যান! আপনি যে কোনও জায়গায় পোস্ট করেছেন এমন আসল সম্পদগুলি রয়েছে? আপনার ডেমো লিঙ্কগুলি এখন নিষ্ক্রিয়, এবং ওয়েবব্যাক মেশিনগুলি চিত্রগুলি ক্যাশে করছে বলে মনে হচ্ছে না। আমি আপনার উত্তরটি বেশ কিছুক্ষণের জন্য বুকমার্ক করে রেখেছি, তবে এটি অধ্যয়নের জন্য কখনই সময় বিনিয়োগ করিনি।

— ব্র্যান্ডন সিলভা

Woot! আমি বছরগুলি আগে ফাইলগুলি সংরক্ষণ করতে এইচটিআরট্র্যাক ব্যবহার করেছি। তাদের খুঁজে পাওয়া যায়! আপনার অনুমতি নিয়ে, আমি এগুলি অন্য কোথাও পোস্ট করব, বা যদি ফাইলগুলি না থাকে তবে আমি পাস করতে পারি এবং আপনি সেগুলি একটি রেপো বা কোনও কিছুতে সংরক্ষণ করতে পারেন।

— ব্র্যান্ডন সিলভা

@ ব্র্যান্ডনসিলভা হ্যাঁ আপনি এগুলি পোস্ট করতে পারেন, এটি দুর্দান্ত হবে

— ড্যানিয়েল মেন্ডেল

4

কিছু ধারণা মাথায় আসে এবং তাদের বাস্তবায়ন পুরোপুরি ইঞ্জিন, সরঞ্জাম এবং, অবশেষে, কাজ এবং সামগ্রীর পাইপলাইনের উপর নির্ভর করে।

স্প্রিট অ্যানিমেশন

ফটোশপ এবং পরে প্রভাবগুলির মতো সরঞ্জামগুলি ব্যবহার করে অ্যানিমেশন তৈরি করুন
ফ্রেম দ্বারা ফ্রেমকে একটি অ্যাটলাসে সরবরাহ করুন (স্প্রিট শিট)
কোড দ্বারা অ্যানিমেশন প্রয়োগ করুন
প্রয়োজনে যথাযথ মাস্কিং বা স্বচ্ছ পটভূমি ব্যবহার করে কার্ডের লেআউটটিকে রেন্ডার করুন।

ভিডিও অ্যানিমেশন

ফটোশপ এবং পরে প্রভাবগুলির মতো সরঞ্জামগুলি ব্যবহার করে অ্যানিমেশন তৈরি করুন
গেম ইঞ্জিন দ্বারা পঠনযোগ্য ফর্ম্যাটে সেই ভিডিওটি রফতানি করুন
কোড অনুসারে অ্যানিমেশন খেলুন
প্রয়োজনে যথাযথ মাস্কিং বা স্বচ্ছ পটভূমি ব্যবহার করে ভিডিওর উপরে কার্ডের বিন্যাসটি রেন্ডার করুন

ইন ইঞ্জিন অ্যানিমেশন

ফটোশপের মতো সরঞ্জাম ব্যবহার করে অ্যানিমেশনের জন্য সমস্ত সম্পদ তৈরি করুন
প্রয়োজনীয় সমস্ত সম্পদ সহ ইঞ্জিনের অভ্যন্তরে কার্ডের মডেল তৈরি করুন
ইঞ্জিনটি এর কাস্টম অ্যানিমেশন সম্পাদক ব্যবহার করে অ্যানিমেট করুন এবং এটি সংরক্ষণ করুন
প্রয়োজনে কোড অনুসারে অ্যানিমেশন খেলুন

এই তিনটি অ্যানিমেশন যা আমি জানি এবং আমি কাজ করেছি। প্রত্যেকের জন্য বিভিন্ন উপকারিতা রয়েছে এবং এই বিশেষ ক্ষেত্রে আমি স্প্রিট এবং ভিডিও অ্যানিমেশনটির প্রতি বেশি ঝোঁক, কারণ তারা কম জিপিইউ-নিবিড়'re

এই জাতীয় ক্ষেত্রে, সহজতম পদ্ধতির সম্ভবত সম্ভবত সঠিক পন্থা।

— reefaktor
সূত্র

1

এটি করার একটি উপায় হ'ল কোনও টেক্সচারের জায়গায় কেবল একটি ভিডিও ব্যবহার করা। এই ভিডিওটি আগে থেকেই প্রস্তুত করতে হবে এবং লুপিং করা দরকার।
আরেকটি উপায় হ'ল পুরো "চরিত্র, কণা, কেপ মুভিং" দৃশ্যের একটি বাফারে রেন্ডার করা যা পরে ফ্রেম রেন্ডারিংয়ের পরে টেক্সচারের জায়গায় ব্যবহার হয়।

থ্রিডি ইঞ্জিনে কীভাবে এই দুটি সমাধান অর্জন করতে হবে সে সম্পর্কে আমার কোনও অভিজ্ঞতা নেই তবে আমি মনে করি যে 2D ইঞ্জিনে উভয়ই সম্ভব (আমি উদাহরণস্বরূপ মোআআইএতে এই কাজটি করতে পারি বলে মনে করি)।

— কোসতাস
সূত্র

1

4 এবং 5 উভয়ই অঞ্চল জুড়ে কোনও টেক্সচার স্ক্রোল করে ইউভি দ্বারা সম্পন্ন করা যেতে পারে, সম্ভবত কিছুটা বিকৃত কার্ডের উপর একটি জাল থাকা (একটি স্থিতিশীল উপায়ে)। রক্তের ছাপের মধ্যেও একটি দ্বিতীয় টেক্সচার রয়েছে যা প্রথম টেক্সচারকে একক করে এবং ইউভি স্ক্রোল করে না।

সামগ্রিকভাবে, এগুলি ব্যয়বহুল প্রভাব নয়। তারা প্রথম নজরে দেখায় তেমন ভাল নয়।

— ডগ
সূত্র

4 এবং 5 বলতে কি বোঝায়?

— ভায়ল্যানকোর্ট

"ঘূর্ণায়মান ধোঁয়া প্রভাব, উদাহরণ 1 এবং হালকা 2 / উদাহরণস্বরূপ সবুজ / বেগুনি আভা"। আমি অনুমান করব যে বিকৃতি প্রভাবটি হ'ল উল্লম্ব চলাচলের একটি ক্যানড অ্যানিমেশন বা রানটাইমের সময় একটি প্রক্রিয়াগত সেগুলি। অথবা এটি দ্বিতীয় ইউভি স্ক্রোলিং জমিন দ্বারা প্রবর্তিত টেক্সচার নমুনা পক্ষপাত সহ শেডার হতে পারে।

— ডগ

0

স্পাইন হিসাবে 2 ডি কঙ্কালের অ্যানিমেশন সরঞ্জামগুলির সাথে প্রায় সমস্ত প্রভাব অর্জন করা যেতে পারে। একটি স্প্রাইট মূলত 2 ডি জাল উপর একটি টেক্সচার হয়। জালটি তখন কেপ সরানোতে রূপান্তরিত হয় etc. এ
জাতীয় প্রভাবের উদাহরণগুলির জন্য ডেমো রিলটি পরীক্ষা করে দেখুন। http://esotericsoftware.com/spine-in-dthth# বৈশিষ্ট্যগুলি বেশিরভাগ সাধারণ ইঞ্জিন / ভাষার জন্য রানটাইম রয়েছে। অনুরূপ একটি সরঞ্জাম হ'ল স্প্রিটার: http://www.brashmonkey.com

— Felsir
সূত্র