স্ক্রিন রেজোলিউশনের সাথে ফন্টের আকারটি কীভাবে মিলবে?


12

সুতরাং আমি LibGDX ব্যবহার করে একটি গেমের সাথে কাজ করছি এবং আমার একটি সমস্যা আছে have

আমার গেমটি সর্বাধিক রেজোলিউশনে ফিট করার জন্য, আমি প্রতিটি অনুপাতের অনুপাতের জন্য একটি বেস সম্পদ তৈরি করেছি, উদাহরণস্বরূপ, একটি প্রধান মেনু পটভূমি চিত্র, আমি এটি 4: 3, 1280X720 এ 16: 9 ইত্যাদির জন্য 800X600 এ তৈরি করেছি etc.

এখন আমি TextButtonগেমের সাথে বিকল্পগুলি অন্তর্ভুক্ত করার চেষ্টা করছি ; আমার সমস্যাটি হ'ল আমি বুঝতে পারি না যে কোন ফন্টের আকারগুলি কোন পর্দার রেজোলিউশনের সাথে মেলে। এটি খুঁজে বের করার কোনও উপায় আছে, বা আমার যে রেজোলিউশন রয়েছে তার প্রত্যেকটির মধ্যে আমাকে একের পর এক যেতে হবে এবং কেবল পাঠ্যটির সাথে সমাধানের সাথে ম্যানুয়ালি মেলাতে হবে?

উত্তর:


17

এটি সহজ: ফন্টগুলির রেজোলিউশন মেলাতে হবে না, তাদের পিক্সেল ঘনত্বের সাথে মেলে নেওয়া দরকার ।

পিক্সেল ডেনসিটি পিক্সেল প্রতি ইঞ্চি ( পিপিআই ), বা পিক্সেল প্রতি সেন্টিমিটার হিসাবে পরিমাপ করা হয় । ঘনত্বের স্বাধীন পিক্সেল ( ডিপি ) নামে একটি পরিমাপের ইউনিট রয়েছে । এটি সংজ্ঞায়িত করা হয় যে স্ক্রিনে 1dpএক পিক্সেল আকার রয়েছে 160 PPI

এখন ফন্টে ফিরে এসে, এই পরীক্ষাটি করার চেষ্টা করুন: আপনার ল্যাপটপটি 720p এ চালানোর জন্য রাখুন। ফন্টের আকারটি একবার দেখুন। এখন এটি আপনার ডেস্কটপের মনিটরে 1080p 42 এ প্লাগ করুন your যদি আপনার মনিটরটি তার আকার সম্পর্কে সঠিক তথ্য দেয় তবে ফন্টটি 720p স্ক্রিনে ঠিক একই আকারের হওয়া উচিত your আপনার পাঠ্যটিতে পাঠ্য থাকলে তা কতটা অদ্ভুত হবে তা কল্পনা করুন your ল্যাপটপের আপনার ডেস্কটপ মনিটরের পাঠ্যের চেয়ে আলাদা আকার ছিল thatএর সাথে বলা হয়েছে, বৃহত্তর রেজোলিউশনগুলি ফন্টকে আরও বিশদ দিতে হবে, বৃহত্তর স্ক্রিনগুলি আরও বেশি সামগ্রী দেখানোর জন্য দেওয়া উচিত।

একই ঘটনা পাঠ্য সম্পাদকদের উপর লক্ষ্য করা যায়। 72ptকাগজে মুদ্রিত হওয়ার সময় কোনও ফন্টের পর্দায় যেমন দেখতে হবে তেমন দেখা উচিত।

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

এই চার্টটি (উত্তরের নীচেও অন্তর্ভুক্ত) আমাদের 12ptসিএসএসে বলুন সিএসএসেও মোটামুটি সমান 16px(যেমন এটি যথেষ্ট বিভ্রান্তিকর ছিল না, সিএসএসে একটি পিক্সেল অন্য কোথাও ডিপি এর সমান ), সুতরাং আসুন আপনাকে বলি আপনার ফন্টগুলি 16dpLibGDX এ তৈরি করব make

আপনার গেমটিতে, FreeTypeFontGeneratorহরফ থেকে ফন্টগুলি তৈরি করতে ব্যবহার করুন , আপনি যখন পর্দা ঘনত্ব তৈরি করেন তখন তা বিবেচনা করতে পারেন:

BitmapFont createFont(FreeTypeFontGenerator ftfg, float dp)
{
    return ftfg.generateFont((int)(dp * Gdx.graphics.getDensity()));
}
//On Init
BitmapFont buttonFont = createFont(arial, 16); //16dp == 12pt

এটি কাজ করে কারণ Gdx.graphics.getDensity()এটি সমান YourScreenDensity/160, এটি একটি "স্কেল ফ্যাক্টর" যা তারা 160ppi স্ক্রিনের আকারে জিনিস আনবে bring

আমি আগে বর্ণিত ব্যতিক্রমগুলি সম্পর্কে: লোগো, প্রমো ইত্যাদির ক্ষেত্রে আপনি সম্ভবত পর্দার আকার অনুসারে ফন্টগুলি পুনরায় আকার দিতে চাইবেন তবে মনে রাখবেন আপনি ফটোশপ বা জিম্পের মতো গ্রাফিক্স সম্পাদকটিতে এগুলি তৈরি করা থেকে ভাল হবেন you'll যাইহোক,

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

টি এল; ডিআর:

  • শারীরিক আকার মোটামুটি স্ক্রিনের আকার বা রেজোলিউশনের সাথে সরাসরি পরিবর্তন হয় না, তবে উভয়ের সংমিশ্রণের সাথে ( screenSize/resolutionবিখ্যাত পিপিআই)
  • চিন্তা করুন পর্তুগীজ ভাষায় এবং ডিপি । আপনাকে চূড়ান্ত ফলাফলটি আঁকতে না আসা পর্যন্ত স্ক্রিন পিক্সেলগুলি সম্পর্কে ভুলে যান।
  • যুক্তিসঙ্গত আকারের সাথে রানটাইমের সময় আপনার ফন্টটি তৈরি করুন।
  • ডিপি কে স্ক্রিন পিক্সেলে রূপান্তর করা হচ্ছে :pixels = dp * Gdx.graphics.getDensity();
  • আপনি যদি একটি ইঞ্জিন যা কোন আপনাকে কনভার্টার দিতে না ব্যবহার করে থাকেন dp LibGDX মত Gdx.graphics.getDensity(), আপনি চেষ্টা করতে পারেন: densityFactor = Screen.getPixelsPerInch() / 160.0fতারপর,pixels = dp * densityFactor

সম্পাদনা করুন:

2014, 25 জুন গুগল আইওতে, মাতিয়াস অ্যান্ড্রয়েডের জন্য একটি নতুন শৈলীর নির্দেশিকা ঘোষণা করেছে, এতে একটি নতুন রোবোটো ফন্ট এবং টাইপোগ্রাফি নির্দেশিকা অন্তর্ভুক্ত রয়েছে। গাইড হিসাবে এই টেবিলটি নিন:

অ্যান্ড্রয়েড ফন্ট আকারের নির্দেশিকা, নেওয়া ফ্রন্ট google.com/design

EDIT2:

লিঙ্কটি পচে যাওয়ার ক্ষেত্রে সিএসএস ফন্ট আকারের চার্ট অন্তর্ভুক্ত রয়েছে: সিএসএস হরফ আকার


1
+1, দুর্দান্ত উত্তর। দেখার দূরত্বও একটি খুব গুরুত্বপূর্ণ উপাদান। আপনার পিসি বা এমনকি কোনও ট্যাবলেট (যেখানে দেখার দূরত্বটি খুব কম) এর তুলনায় কনসোল / টিভিতে চালিত গেমগুলির জন্য আপনার বড় ফন্টের প্রয়োজন হবে।
বাম্মজ্যাক

1
@ বিম্মজ্যাক দুর্দান্ত যে আপনি এটি দেখিয়েছেন! আপনি ভালো ফর্মুলা করার জন্য একটি স্কেলিং ফ্যাক্টর যোগ করে এই অর্জন করতে পারেন: dp * Gdx.graphics.getDensity() * distanceFactor। আপনি ডিস্টেন্স ফ্যাক্টরকে একটি ধ্রুবক তৈরি করতে পারেন এবং 2কনসোল / টিভিতে সংকলন করার সময় এটি সংজ্ঞায়িত করতে পারেন , 1অন্যথায়। অবশ্যই এর জন্য আপনার আরও ভাল মান খুঁজে পাওয়া উচিত।
গুস্তাভো ম্যাকিয়েল

এ নিয়ে আমার সমস্যা হচ্ছে। আমি যখন মাত্র এসপি আকারটি জেনারেটরে পিক্সেলের আকার হিসাবে রেখেছি তখন আমার ডেস্কটপ অ্যাপ্লিকেশনটিতে চিত্রের মতো এবং একই সাথে অন্যান্য অনলাইন উত্সগুলিতে ঠিক একই আকার পাই get যখন আমি তার দ্বারা গুন করি getDensity() == 0.6তারা আমার ডেস্কটপে অপঠনযোগ্য। এগুলি ছোট হয় তবে আমার গ্যালাক্সি এস 8-তে দুর্দান্ত আকারযুক্ত যেখানে where getDensity () == 3 '। আমি নিজেই ঘনত্বটি গণনা করেছি এবং সেগুলি সঠিক বলে মনে হচ্ছে, তারপরে আমি আসলে আমার ফোনটি আমার ডেস্কটপ অ্যাপ্লিকেশনটির পাশে রেখেছিলাম এবং তারা সত্যই সমান। তবে সেগুলি কি আমার ডেস্কটপে প্রদর্শিত প্রকৃত চিত্রের আকার নয়?
ম্যাডমিনিও

@ ম্যাডমিনিও এটিই আমি যে স্কেলিং ফ্যাক্টরের কথা বলেছিলাম। একই ফর্ম-ফ্যাক্টরযুক্ত ডিভাইসে পাঠ্যের আকার একই রাখতে আপনার ঘনত্বের স্কেলিং ব্যবহার করা উচিত। তাই পরিবর্তে dp * getDensity(), আপনি সম্ভবত কী করা উচিত dp * getDensity() * scalingFactor, যা scalingFactorকম্পাইল সময়ে সিদ্ধান্ত নেওয়া উচিত এবং ভালো কিছু কাজ করতে পারে: ফোন: scalingFactor = 1কম্পিউটার: scalingFactor = 3এবং টিভি: scalingFactor = 5। এই সংখ্যা নিয়ে খেলুন!
গুস্তাভো ম্যাকিয়েল

গেটডেনসিটি ঘনত্বের সঠিক হিসাবে ফিরে আসে না। github.com/libgdx/libgdx/issues/5322#issuecomment-406902114 আপনাকে getPpiX() / 160)আরও ভাল ফলাফল পেতে চাইলে কিছু করতে হবে। যাইহোক, getDensity()বেশিরভাগ ক্ষেত্রেই আমার ধারণা অনুমানযোগ্য একটি ভাল কাজ রয়েছে।
ম্যাডমিনিও
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.