একটি ব্রাউজারে (বামন দুর্গের মতো) আসকি মানচিত্র এবং চলমান অক্ষর তৈরির জন্য ভাল প্রযুক্তিগত সমাধানগুলি? [বন্ধ]


10

আমি আমার গেম ওয়েবসাইটটির জন্য একটি ওয়েব অ্যাপ তৈরি করতে চাই যাতে প্রাণী এবং লোকের প্রতিনিধিত্ব করার জন্য পাঠ্য অক্ষর ব্যবহার করা জড়িত থাকে এবং তাদের স্বাধীন (সার্ভার চালিত) এআই সহ মানচিত্রে স্কোয়ারে ঘোরাতে দেওয়া হয়।

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

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

আমি সচেতন আছি <canvas>, যদিও আমি জানি না তার ক্ষমতা এই ব্যবহারের ক্ষেত্রে মাপসই করা হবে। অবশ্যই কিছু পরিমাণ জাভাস্ক্রিপ্ট প্রয়োজনীয় হতে চলেছে।

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



ঠিক আছে, rot.js হুবহু আমি যা খুঁজছিলাম তা হতে পারে তবে তা এটি জানত না।
Kzqai

উত্তর:


5

আমি আসলে ওয়েব, ইউনিকোডাইলস.জেএস এর জন্য একটি অক্ষর প্রদর্শন গ্রন্থাগার তৈরি করেছি , যা আমি কেবলমাত্র অনুকূলকরণের জন্য কিছু সময় ব্যয় করি নি, তবে এটি পাঠ্য উপস্থাপনের বিভিন্ন উপায়ও আবিষ্কার করে; এটির তিনটি সরবরাহকারীর রয়েছে:

  1. ডোম, যা <div>প্রতিটি গ্লিফকে কাস্টমাইজেবল ফোরগ্রাউন্ড এবং ব্যাকগ্রাউন্ড রঙের সাথে রেন্ডার করতে উপাদানগুলির একটি ম্যাট্রিক্স ব্যবহার করে ।
  2. ক্যানভাস, যা <canvas>উপাদানটি ব্যবহার করে অক্ষরগুলি আঁকবে। এটি অনেক দ্রুত এবং এর ব্যাক আপ করার জন্য পারফরম্যান্স টেস্ট রয়েছে: http://tapiov.net/unicodetiles.js/tests/
  3. ওয়েবজিএল, যা কোনও ফন্টের টেক্সচার তৈরি করতে ক্যানভাস-উপাদান ব্যবহার করে এবং তারপরে ওয়েবজিএল ব্যবহার করে রেন্ডার করে, এটি ব্রাউজারগুলিতে আরও দ্রুত এবং খুব স্কেলযোগ্য, তবে ব্রাউজারগুলিতে ততটা সমর্থিত নয়।

নোট করুন যে লিঙ্কযুক্ত পারফরম্যান্স পরীক্ষাগুলি প্রতিটি চরিত্রকে প্রতিটি ফ্রেমে পরিবর্তিত করে চূড়ান্ত হতে পারে। অনুশীলনে, এমনকি ডিওএম রেন্ডারারও বেশিরভাগ উদ্দেশ্যে যথেষ্ট দ্রুত।

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


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


খুশী হলাম। আমি এটি ব্যবহার করতে পারি অথবা আমার নিজের পদ্ধতির কথা জানানোর জন্য অন্য যেভাবে এটি করেছে তা থেকে কমপক্ষে শিখুন, যেহেতু আমি কোনও রগুইলাইক তৈরি করতে চাই, তবে এটি কোনও রগুইলাইকের মতো নয়। : ডি
কেজকাই

@ টেপিও আমি ইউনিকোডাইলস দিয়ে প্যাকম্যান বাস্তবায়নের চেষ্টা করছি, সমস্যাটি সর্বদা মানচিত্রে কেন্দ্রিক খেলোয়াড়, প্যাকম্যানের পক্ষে এটি অনাকাঙ্ক্ষিত, আমি কি কোনওভাবে এটি অক্ষম করতে পারি, বা প্লেয়ারকে নির্দিষ্ট না করেই ঘুরে আসতে পারি।
ব্যবহারকারী3995789

6

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

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

http://en.wikipedia.org/wiki/Dwarf_Fortress

অন-স্ক্রিন প্রদর্শনগুলি 16 টি বিভিন্ন বর্ণে কিছুটা সংশোধিত কোড পৃষ্ঠা 437 টি অক্ষর ব্যবহার করে বিটম্যাপ হিসাবে প্রয়োগ করা হয়েছে, ওপেনজিএল দিয়ে রেন্ডার করা হয়েছে

সম্পাদনা: কারণ আমি কিছু মন্তব্য পেয়েছি আমি উত্তরটি কিছুটা বাড়িয়েছি


অন্যান্য ভাষা কি এএসসিআইআই প্রতিস্থাপনের পরিবর্তে এক্সটেনশন নয়? কেন সাধারণ পাঠ্যযুক্ত ওয়েবসাইটগুলি "এটি নকল" করে না?
আনকো

1
ইউটিএফ -8 এনকোডিং ব্যবহার করে বেশিরভাগ চরিত্রের এনকোডিং সমস্যা প্রতিরোধ করা যেতে পারে।
ফিলিপ

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

1
@ লিয়োসান এটি নিশ্চিত করতে পারেন। কেবল সিএসএস ঘোষণার ব্যবহার করুন font-family:monospace;এবং ওয়েব ব্রাউজারটি ডিফল্ট মনোস্পেস ফন্ট ব্যবহার করবে।
ফিলিপ

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

3

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

আপনি যখন এটি পাঠ্যপুস্তকটি করতে চান , আপনি কোনও মনসপাসেড ফন্ট এবং একটি টেবিলের সাহায্যে পাঠ্যটি ব্যবহার করতে পারেন যেখানে প্রতিটি ঘরে একটি করে অক্ষর থাকে।

স্বতন্ত্র অক্ষরগুলিকে সম্বোধন করতে আপনি <table>সারি এবং কলামগুলির সঠিক সংখ্যার সাহায্যে একটি তৈরি করতে পারেন , যেখানে প্রত্যেকের <td>আইডি রয়েছে যার এক্স এবং y- স্থানাঙ্ক রয়েছে। এইভাবে আপনি স্বতন্ত্র কক্ষগুলিকে আইডির মাধ্যমে সম্বোধন করতে পারেন এবং চিঠিটি পরিবর্তন করতে এবং তাদের রঙ পরিবর্তন করতে তাদের CSS শ্রেণি পরিবর্তন করতে তাদের অভ্যন্তরীণ এইচটিএমএল পরিবর্তন করতে পারেন।

একটি ক্যানভাস ব্যবহার করা তত দ্রুত হতে পারে কারণ আপনার প্রতিস্থাপন করতে হবে এমন প্রতিটি চরিত্রের জন্য আপনাকে একটি বড় ডিওএম ট্রি ম্যানিপুলেট করতে হবে না। বামন দুর্গ উপায় দ্বারা, একই জিনিস করছেন। যে চরিত্রগুলি অবজেক্টগুলির প্রতিনিধিত্ব করতে ব্যবহৃত হয় তা আসলে বিটম্যাপ হয় না সত্য টেক্সট আউটপুট এবং সেগুলি 2 ডি গ্রাফিক API ব্যবহার করে আঁকা হয়। এইচটিএমএল 5 ক্যানভাস এর জন্য সজ্জিত। এটা আছে context.fillText পদ্ধতি যা আপনি ক্যানভাস টেক্সট অঙ্কনের অনুমতি দেয়। এটি পৃথক অক্ষর আঁকতে ব্যবহার করা যেতে পারে। আপনি ভেরিয়েবল কনটেক্সট.ফন্ট এবং প্রতিটি চিঠির রঙ কনটেক্সট.ফিলস্টাইলকে কল করে মাপ এবং ফন্টের মুখ পরিবর্তন করতে পারেন ।

নোট করুন যে প্রতি ফ্রেমে ফিলটেক্সট শত শত বার কল করা ধীর হতে পারে, কারণ রাস্টারাইজিং ফন্টগুলি ব্যয়বহুল এবং কোনও ব্রাউজার যা আমি জানি না ক্যাচিংয়ের ব্যবহার। এর অর্থ হ'ল আপনি যখন একই সেটিংসের সাথে একই অক্ষরটি কয়েকশবার রেন্ডার করবেন, তখন এটি একশ বার পুনরায় রাস্টেরাইজ করা হবে। কর্মক্ষমতা আপনি একটি লুকানো ক্যানভাসে প্রতিটি রঙ সঙ্গে প্রতিটি চিঠির rasterized চেহারা ক্যাশে পারে বাড়াতে ও তাহলে এই গোপন ব্যবহার canvases আঁকা context.drawImage । একটি ক্যানভাস থেকে অন্য কপি করা অনুলিপি সাধারণত ফন্ট রাস্টারাইজেশনের চেয়ে অনেক দ্রুত।

আমি বর্তমানে ক্যানভাস ব্যবহার করে একটি 2 ডি গেমটি বিকাশ করছি এবং লক্ষ্য করেছি যে বৃহত্তম এফপিএস ইটার হ'ল ফন্ট অঙ্কন। আমি যখন রাস্টারযুক্ত পাঠ্যের জন্য একটি ক্যাশে যুক্ত করেছি, তখন এটির পারফরম্যান্সটি অনেক উন্নত হয়েছে।


বিটম্যাপ ফন্টগুলিও সত্য পাঠ্য আউটপুট! আমি এগুলি সর্বদা একটি টার্মিনালে ব্যবহার করি। এছাড়াও, যদি একটি ক্যানভাস দ্রুত হয় তবে স্ট্যাকএক্সচেঞ্জের পাঠ্য কেন ক্যানভাস ভিত্তিক রেন্ডারিং নয়?
আনকো

অভিশাপ, এখন আমি তার জন্য একটি লাইব্রেরি লিখতে চাই।
ফিলিপ

@ অ্যাঙ্কো টার্মিনাল! = ওয়েব ব্রাউজার। আপনি কোন পাঠ্য রেন্ডারিংয়ের উল্লেখ করছেন?
ফিলিপ

1
আনকো বলেছেন যে বিটম্যাপযুক্ত ফন্টগুলি সত্য-পাঠ্য হিসাবে সে তার টার্মিনালে সেগুলি ব্যবহার করতে পারে - এবং এটিই তার প্রমাণ যে বিটম্যাপ করা ফন্টগুলি সত্য-পাঠ্য।
পোলার

0

ঠিক আছে এটি অন্ধকারের মধ্যে কেবল ছুরিকাঘাত এবং আমি জানি না যে এটি কীভাবে উপস্থাপিত হয়।

মূলত আপনি একই কৌতুক কনসোলগুলি ব্যবহার করেন (ওরফে টার্মিনাল) পুরানো দিনগুলিতে। প্রথমে আপনি একটি মনোস্পেস ফন্ট দিয়ে শুরু করুন। আপনার এন অক্ষরের সাথে এম লাইন রয়েছে। সুতরাং আপনি পাঠ্যটি কেবল একটি ডিভের মধ্যে ফেলে দিন যা যথেষ্ট প্রশস্ত (প্রস্থ: এন এম?) এবং প্রতিটি এন অক্ষরকে একটি লাইন বিরতি রেখেছেন; এই ক্ষেত্রে একটি <br/>পরিবর্তে একটি \n

কৌশলটি হ'ল বাফারটি প্রতিস্থাপন করা হয়, হয় চরের মাধ্যমে চর বা পুরো সামগ্রীটি জাভা স্ক্রিপ্টের সাথে একবারে।

আপনি যদি সত্যই সুনির্দিষ্ট হতে চান তবে আপনার সর্বত্র একই মনসস্পেস ফন্ট রয়েছে তা নিশ্চিত করতে আপনি @ ফন্ট-ফেস ব্যবহার করতে পারেন।


আমি এটি করার বিষয়েও ভেবেছিলাম, তবে তখন আমি বুঝতে পেরেছিলাম যে আপনি যখন প্রতিটি স্বতন্ত্র চরিত্রের রঙ এবং পটভূমি-রঙ নিয়ন্ত্রণ করতে চান তখন এটি কোনও ভাল আর্কিটেকচার হতে পারে না।
ফিলিপ

0

গ্লাইফস বিবেচনা করুন। এর পেছনের অর্থটি থেকে পাঠ্যের প্রদর্শনটি দ্বিগুণ করুন। উদাহরণ স্বরূপ:

(সুডোকোড)

if (display.hitGlyph)
    glyph = Glyph.Asterisk;

display(glyph);

এবং তারপরে গ্লাইফ অ্যাটলাস সংজ্ঞায়িত করার জন্য আপনার অন্তর্নিহিত কোডটিতে কেবল কিছু হিসাবে করুন:

Glyph.Asterisk = "*";

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

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