স্প্রেটসের চারপাশে অঙ্কনের কার্যকর উপায়


21

আমি গেমটি প্রোগ্রাম করার জন্য এক্সএনএ ব্যবহার করছি এবং আমার স্প্রাইটে 'নির্বাচিত' প্রভাব অর্জনের জন্য বিভিন্ন উপায়ে পরীক্ষা-নিরীক্ষা করছি। আমার যে সমস্যাটি হচ্ছে তা হ'ল স্প্রাইটব্যাচে আঁকানো প্রতিটি ক্লিকযোগ্য একক স্প্রাইটের চেয়ে বেশি ব্যবহার করে টানা হয় (প্রতিটি বস্তু 6 টি স্প্রাইট দিয়ে গঠিত হতে পারে)।

আমি এটির প্রশংসা করব যদি কেউ আমার এক্স পিক্সেলের স্প্রিটগুলিতে একটি রূপরেখা যুক্ত করে কীভাবে অর্জন করতে পারেন সে সম্পর্কে আমাকে পরামর্শ দিতে পারে (যাতে বাহ্যরেখার প্রস্থ পুরো পিক্সেলের বিভিন্ন সংখ্যা হতে পারে)।

আগাম ধন্যবাদ,

  • গ্রেগ।

উত্তর:


20

এটি করার সবচেয়ে সহজ উপায়টি (সম্ভবত সবচেয়ে ভাল উপায়, যদি না আপনি সত্যিকার অর্থে পারফরম্যান্সের জন্য আটকে থাকেন) আপনার স্প্রাইটসের দুটি কপি থাকতে পারে।

  • নিয়মিত সংস্করণ
  • একটি "ফ্যাট", রঙ না করা সংস্করণ - মূলত আপনার স্প্রাইট এক্স-বহু পিক্সেলের মূল চেয়ে "ফ্যাটার" এর একটি সাদা সংস্করণ।

"ফ্যাট" সংস্করণ ব্যবহার করে আপনার পুরো বস্তুটি আঁকুন, তারপরে উপরের দিকে নিয়মিত সংস্করণটি আঁকুন।

"ফ্যাট" সংস্করণটি সাদা করে, আপনি স্প্রেটব্যাচের অন্তর্নির্মিত রঙিন রঙিন নির্বাচনের রঙ পরিবর্তন করতে ব্যবহার করতে পারেন am

আপনার "ফ্যাট" ভেরিশন উত্পন্ন করার জন্য আমি একটি সামগ্রী পাইপলাইন এক্সটেনশন লেখার পরামর্শ দিচ্ছি যা স্বয়ংক্রিয়ভাবে আপনার মূল স্প্রিটগুলি নিতে পারে, তাদের আলফা চ্যানেলটি পড়তে পারে, মূল চিত্রটিতে সর্বাধিক আলফা চ্যানেল নমুনা করে প্রতিটি পিক্সেলের চারপাশে এক্স-বহু পিক্সেল, এবং আরজিবি = (1,1,1) সেট করছে।

আপনাকে অবশ্যই নিশ্চিত করতে হবে যে আপনার স্প্রিটের সমস্তরই বাহ্যরেখা যুক্ত করার জন্য পর্যাপ্ত স্বচ্ছ সীমানা রয়েছে (আপনি এটি কনটেন্ট প্রসেসরে দেখে নিতে পারেন - এমনকি প্রয়োজনে জায়গাও তৈরি করতে পারেন)।

আপনার যদি কেবল কয়েকটি স্প্রিট থাকে তবে আপনি কেবল একটি ভাল চিত্র সম্পাদক (জিআইএমপি, ফটোশপ) ব্যবহার করতে পারেন এবং এটি হাতে হাতে করতে পারেন: আলফা চ্যানেল নির্বাচনের জন্য, নির্বাচনকে প্রসারিত করতে, আলফায় নির্বাচন করতে, রঙ চ্যানেলগুলিকে সাদা পূরণ করতে।


4

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


11
এই ধরণের শেডার লিখতে অবাক করে বিরক্তিকর, আমি শুনেছি (আমরা এটি আমাদের 3 ডি গেমগুলির মধ্যে একটিতে ব্যবহার করেছি এবং কৃপণতার সাথে চালিয়ে যাচ্ছি)। আপনি যে বিষয়টিকে বিবেচনা করতে চাইতে পারেন তা হ'ল নির্দিষ্ট রঙের (0, 255, 255, 0) মতো স্প্রাইট টেক্সচারে সরাসরি রূপরেখাটি এনকোড করা এবং স্প্রাইটটি নির্বাচন করা হলে শেডারটি সেই রঙটি রূপান্তরিত করে। তারপরে শেডারটি একটি তুচ্ছ রঙের পরিবর্তন এবং আপনার রূপরেখা এবং আপনার পছন্দসই যে কোনও বিবরণ রয়েছে তার উপরে আপনার উচ্চ স্তরের শিল্পী নিয়ন্ত্রণ থাকে।

4

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

when selected:
   outline = new sprite canvas of appropriate size
   for sprite in object:
      # use larger numbers for thicker outlines
      for x in (-1, 0, 1) and y in (-1, 0, 1):
         render sprite mask into canvas at x,y with desired color

মনে রাখবেন যে আপনার প্রতিটি ড্র করার দরকার নেই (যদিও আমি মনে করি আপনি পারতেন), তবে স্প্রাইটগুলি স্যুইচ করার সময় কেবলমাত্র নতুন রূপরেখা স্প্রিট তৈরি করুন।


হ্যাঁ, এটিই আমি পরামর্শ দিতে চেয়েছিলাম। বিদ্যমান স্প্রাইটের নীচে মূল স্প্রাইটের বাম, ডান, উপরে এবং নীচে মাস্কড স্প্রাইট 1 পিক্সেল রেন্ডার করুন। অনেক গেম এই পদ্ধতিটি রেন্ডার্ড পাঠ্যের বাহ্যরেখাতে ব্যবহার করে বা 4 টির মধ্যে কেবল 2 পজিশনের সাথে একটি ড্রপ শ্যাডো তৈরি করে।
কাজ

1

সবচেয়ে সহজ ব্রুট ফোর্স অ্যাপ্রোচ হ'ল প্রতিটি স্প্রাইটের দুটি কপি, একটি স্বাভাবিক এবং হাইলাইটেড একটি তৈরি করা। তারপরে হাইলাইট করার পরে সেগুলি কেবল অদলবদল করুন।

যদি আপনি বাঁচতে স্মৃতি পেয়ে থাকেন তবে আরও জটিল হওয়ার দরকার নেই তখন। হাইলাইট করার সময় প্লাস শিল্পীদের চেহারাতে সম্পূর্ণ নিয়ন্ত্রণ থাকে যাতে আপনি একটি রূপরেখা বা আপনার পছন্দসই কিছু করতে পারেন।


আমি মনে করি সমস্যার একটি অংশ হ'ল ওপি বলেছে যে প্রতিটি বস্তু একাধিক স্প্রাইট দিয়ে তৈরি হতে পারে। সুতরাং আমি অনুমান করি যে রূপরেখাটি প্রতিটি উপাদান স্প্রাইটের চারপাশে আলাদা আলাদা রূপরেখার পরিবর্তে সম্মিলিত বস্তুর রূপরেখা হতে হবে be
ক্রিস হাউ

1
ক্রিস, এটি সম্মিলিত বস্তুর রূপরেখা হতে হবে না এবং এটি একাধিক স্প্রাইট থেকে তৈরি কোনও বস্তুর পক্ষে কাজ করবে। ওয়াকারস্লেক যা বলেছেন ঠিক তেমনটি করুন, তবে নিশ্চিত করুন যে আপনি সেই বস্তুর জন্য সমস্ত সাধারণ স্প্রাইটের পিছনে হাইলাইটেড স্প্রাইটগুলি আঁকছেন। এইভাবে কোনও বস্তু কতগুলি স্প্রিট তৈরির বিষয়টি বিবেচনা করে না, হাইলাইটটি কেবলমাত্র সেই অবজেক্টটির জন্য ড্রয়ের সময় দ্বিগুণের চেয়ে কিছুটা বেশি ব্যবহার করবে, যা সম্মিলিত স্প্রাইটের সাথে রেন্ডারটাইমের সময় রূপরেখা তৈরির চেয়ে অনেক কম হওয়া উচিত।
অ্যাটাকিংহোব

1

প্রতিটি স্প্রাইটের জন্য কীভাবে, আরও একটি স্প্রিট রয়েছে যা বেস স্প্রাইটের একটি রূপরেখা। একটি বাহ্যরেখানো বস্তু অঙ্কন করার সময়, বেস স্প্রিটগুলি আঁকুন, তারপরে সম্মিলিত রেন্ডারিংয়ের একটি মুখোশ তৈরি করুন, তারপরে মাস্কটি বাদ দিয়ে বাহ্যরেখা স্প্রিটগুলি আঁকুন।


2
প্রথমে বাহ্যরেখা স্প্রিটগুলি আঁকুন এবং তাদের উপর নিয়মিত স্প্রিটগুলি আঁকেন না কেন?
ক্রিস হাও

এটি না করার একটি কারণ (বা ক্রিসের পরামর্শ) কারণ এটি দ্বিগুণ টেক্সচার মেমরি ব্যবহার করে; আর একটি কারণ হ'ল শিল্পীর ওয়ার্কফ্লো হ'ল বোকা কারণ প্রতিবার একটি স্প্রাইট পরিবর্তন করার সময় আপনাকে দুটি ফাইল আপডেট করতে হবে।

2
হ্যাঁ, আপনার আদর্শভাবে দুটি প্রকৃত স্প্রাইট সম্পদ থাকবে না। আপনি যদি আপনার স্প্রাইটের জন্য আলফা-পরীক্ষা ব্যবহার করে থাকেন তবে আপনি বাহ্যরেখাকে স্প্রাইটে রেখে দিতে পারেন এবং এটি আপনার স্বচ্ছ অঞ্চলগুলির চেয়ে কিছুটা বেশি একটি আলফা দিতে পারেন। তারপরে আলফা পরীক্ষার রেফারেন্স মানটি নিয়ন্ত্রণ করে আপনি আউটলাইনটি দৃশ্যমান কিনা তা নিয়ন্ত্রণ করতে পারবেন। আমি যা বলছিলাম তা হ'ল যদি আপনার কাছে স্প্রাইটের 2 সংস্করণ থাকে (তবে এটির 2 সম্পদ বা একই সম্পদের 2 টি রাজ্য হোক) আপনার প্রথমে বাহ্যরেখা সংস্করণটি আঁকতে হবে এবং তারপরে সাধারণ সংস্করণটি। এইভাবে আপনার কোনও অভিনব শেডার, মাস্ক বা যা কিছু প্রয়োজন নেই whatever
ক্রিস হাও

1
ক্রিসের ধারণার যোগ্যতা রয়েছে; শিল্পী আপডেট করার সাথে সাথে 2 টি ফাইল (বা এমনকি একই সম্পদ) এড়ানো যায় যদি আপনি আপনার সম্পদ / সামগ্রী পাইপলাইনের অংশ হিসাবে চলমান বাহ্যরেখা স্প্রাইটগুলির জন্য আলফা তৈরির জন্য কোনও সরঞ্জাম তৈরি করেন। টেক্সচার মেমরিটি সমস্যা হতে পারে বা নাও হতে পারে তবে পৃথক রূপরেখা স্প্রিটগুলি অত্যন্ত ডিএক্সটি সংকোচযোগ্য হতে হবে; সম্ভবত ভিডিও মেমরিতে মূল টেক্সচারের আকার 1 / ষ্ঠ এবং কোনও বিশ্বস্ততা হারাবে না।
jpaver

1

বিভিন্ন বাণিজ্য বন্ধের সাথে কয়েকটি আলাদা সমাধান।

সবচেয়ে সহজ: একাধিকবার ফ্ল্যাট রঙ ব্যবহার করে অবজেক্টটি রেন্ডার করুন এবং পিকচার পজিশনটি (অফসেট বাম, উপরে, নীচে, ডান ইত্যাদি), এটি আপনার উপরে যা রেন্ডার করে তার একটি রূপরেখা সংস্করণ তৈরি করবে, তবে তার কার্য সম্পাদন ব্যয় রয়েছে এবং নাও প্রচুর অতিরিক্ত রেন্ডার ছাড়াই চর্বিযুক্ত সীমানার জন্য অনুমতি দিন। এক বা দুটি পিক্সেল সীমানা 4x এর সাথে ঠিক থাকতে পারে।

দ্রুততম: টেক্সচারটি প্রাক প্রসেস করুন এবং ইতিমধ্যে সীমানাযুক্ত একটি কপি রয়েছে, বা এটি কেবল সীমানা, বা আপনি একটি শেডারে রঙিন করতে পারেন এমন একটি সমতল গ্রেস্কেল 8-বিট মাস্ক। এটি সম্ভবত মেমরির ব্যয়ে দ্রুত হবে।

সেরা: আমার মতামত, তবে আপনার অবজেক্টের একটি স্বাক্ষরিত দূরত্ব ক্ষেত্র (এসডিএফ) উপস্থাপনা সম্ভবত সেরা সমাধান হতে পারে। এই টেক্সচারগুলি সোর্স টেক্সচারের চেয়ে অনেক ছোট হতে পারে এবং এখনও দরকারী ডেটা ক্যাপচার করে। মূলত প্রতিটি পিক্সেল এনকোড করে এটি তৈরি করতে ব্যবহৃত বস্তুর থেকে কত দূরে। এই ডেটা হাতে রেখে আপনি গ্লোস থেকে আউটলাইন পর্যন্ত সমস্ত ধরণের প্রভাব লিখতে পারেন। সীমানাটি আকার এবং রঙ ইত্যাদিতে পরিবর্তিত হতে পারে এবং এটি এখনও তুলনামূলক কম সস্তা শেডার এবং কেবল একটি অতিরিক্ত ড্র। ডাউনসাইড হ'ল টুলিং এবং প্রিপ্রোসেসিং।


0

আমি দক্ষতার বিষয়ে নিশ্চিত নই, তবে সবচেয়ে সহজ উপায়টি আমি দেখতে পাচ্ছি যে আপনি প্রথমে নির্বাচিত রঙটিতে স্প্রাইটের একটি বৃহত সংস্করণ আঁকুন। তার উপরে স্প্রিট আঁকুন। আপনি কেবলমাত্র প্রথম স্প্রাইটের প্রান্তটি দেখবেন, নির্বাচনের প্রভাব প্রদান করে।

সম্পাদনা: তবে আপনি মন্তব্য থেকে দেখতে পারেন, এটি একটি ভাল ধারণা নয়।


1
কেবল একটি স্প্রিটকে স্কেল করে দেওয়া একটি সত্য রূপরেখা দেয় না
Iain

2
আমি মনে করি না এটি হবে তবে এটি সহজ হবে।
কমিউনিস্ট হাঁস

2
প্রচুর জিনিস সহজ তবে সমস্যাটি সমাধান করবেন না। যে কোনও ধরণের আকর্ষণীয় সিলুয়েট সহ স্প্রিটের জন্য একটি স্কেল-আপ পরম আবর্জনা তৈরি করবে।

শক্তিশালী স্কোয়ার বা বৃত্তাকার বস্তুগুলির জন্য কেবল স্কেলিং ভাল দেখাবে। আকৃতিটি যদি সত্যিই প্রশস্ত বা লম্বা হয় বা ফাঁক থাকে তবে এটি দেখতে খুব খারাপ লাগবে।
অ্যাটাকিংহোব

3
স্কেলিং আপ না করার চেয়ে ভাল ফলাফল দেবে এবং এটি "পরিপূর্ণতা" এর পথে এক কার্যকর পদক্ষেপও হবে। যদিও গ্রাফিকাল ফলাফলগুলি নিখুঁত হবে না, যদি এটি অভ্যন্তরীণ সরঞ্জামের জন্য হত তবে এটি যথেষ্ট ভাল হতে পারে।
ড্যাশ-টম-ব্যাং

0

আমি স্প্রাইটটি স্কেলিংয়ের সাথে একমত এতদূর সহজতম রুট এবং আপনি বিশেষত এই উদ্দেশ্যে অতিরিক্ত স্প্রাইট তৈরি না করে যে কোনও স্প্রাইট নির্বাচন করতে এটি প্রয়োগ করতে পারেন।

  • অর্থাত্ স্প্রিটআউটলাইন.স্কেল = স্প্রেটআরগিনাল.স্কেল * 0.1f; স্প্রিটআউটলাইন.রঙ = নতুন রঙ (255, 0, 0, 255);

0

মূল স্প্রাইটের রঙটি রূপরেখার রঙের সাথে প্রতিস্থাপন করুন (অথবা আপনি পছন্দ করুন তবে এটিও রঙ করুন)। এই ফ্ল্যাট শেডযুক্ত বা রঙিত স্প্রিটকে 1 বার পিক্সেল অফসেটের সাথে চারবার রেন্ডার করুন: x, y = (- 1, -1) এর পরে (+ 1, -1), তারপরে (-1, + 1) তারপরে (+1) , +1)। বস্তুটি তৈরি করে এমন সমস্ত স্প্রিটের জন্য পুনরাবৃত্তি করুন।

এর পরে, মূল স্প্রেটগুলি শীর্ষে যথাযথভাবে (0,0) রেন্ডার করুন।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.