কেস স্টাডি - স্বয়ংক্রিয় আকার পরিবর্তন HTML5 গেম

Derek Detweiler

ভূমিকা

2010 সালের গ্রীষ্মে, আমরা স্যান্ড ট্র্যাপ তৈরি করেছি, একটি গেম যা আমরা মোবাইল ফোনের জন্য HTML5 গেমগুলির একটি প্রতিযোগিতায় অংশ নিয়েছিলাম। কিন্তু বেশিরভাগ মোবাইল ফোনে হয় গেমের শুধুমাত্র অংশ প্রদর্শন করা হয় বা গেমটিকে খুব ছোট করে তোলে—যা সম্পূর্ণরূপে খেলার অযোগ্য করে তোলে। তাই যেকোনো রেজোলিউশনের সাথে ম্যাচ করার জন্য গেমটিকে তরলভাবে সামঞ্জস্য করার জন্য আমরা এটি নিজেদের উপর নিয়েছি। কিছু পুনঃপ্রোগ্রামিং করার পরে এবং এই নিবন্ধে বর্ণিত ধারণাগুলি ব্যবহার করার পরে, আমাদের কাছে একটি গেম ছিল যা যেকোনো আধুনিক ব্রাউজার জুড়ে স্কেল করা হয়েছে, তা ডেস্কটপ বা মোবাইল ডিভাইসে চলুক।

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

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

পৃষ্ঠা প্রস্তুত করা হচ্ছে

প্রথম ধাপ হল পৃষ্ঠার সেই এলাকাটি নির্দিষ্ট করা যেখানে গেমটি অনুষ্ঠিত হবে। আপনি যদি এটিকে একটি ডিভ ব্লক হিসাবে অন্তর্ভুক্ত করেন তবে আপনি এটির মধ্যে অন্যান্য ট্যাগ বা একটি ক্যানভাস উপাদান রাখতে পারেন। এটি সঠিকভাবে সেট আপ করার মাধ্যমে, এই শিশু উপাদানগুলি প্যারেন্ট ডিভ ব্লকের স্কেলিং উত্তরাধিকারী হবে।

আপনার যদি আপনার খেলার ক্ষেত্রে দুটি অংশ থাকে, একটি খেলার এলাকা এবং একটি স্কোর-কিপিং এলাকা, তাহলে এটি দেখতে এরকম হতে পারে:

<div id="gameArea">
  <canvas id="gameCanvas"></canvas>
  <div id="statsPanel"></div>
</div>

একবার আপনার একটি মৌলিক নথির কাঠামো হয়ে গেলে, আপনি এই উপাদানগুলিকে কয়েকটি CSS বৈশিষ্ট্য দিতে পারেন যাতে সেগুলিকে আকার পরিবর্তন করার জন্য প্রস্তুত করা যায়। "gameArea"-এর জন্য অনেক CSS প্রপার্টি সরাসরি JavaScript দ্বারা ম্যানিপুলেট করা হয়, কিন্তু তাদের কাজ করার জন্য, প্যারেন্ট gameArea div ব্লক থেকে শুরু করে আরও কয়েকটি CSS প্রপার্টি সেট আপ করুন:

#gameArea {
  position: absolute;
  left:     50%;
  top:      50%;
}

এটি পর্দার মাঝখানে ক্যানভাসের উপরের বাম কোণে রাখে। পরবর্তী বিভাগে বর্ণিত জাভাস্ক্রিপ্ট অটো-রিসাইজ ফাংশনটি গেম এরিয়ার আকার পরিবর্তন করতে এবং এটিকে উইন্ডোতে কেন্দ্রীভূত করতে অতিরিক্ত CSS বৈশিষ্ট্যগুলি পরিচালনা করে।

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

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

চিত্র 1: পিক্সেলে গেম এরিয়া চাইল্ড উপাদানের মাত্রা

এই মানগুলিকে শতাংশে অনুবাদ করলে ক্যানভাস প্রস্থে 100% এবং উচ্চতায় 100% হয় (গেম এরিয়ার, উইন্ডো নয়)। 24 কে 300 দ্বারা ভাগ করলে পরিসংখ্যান প্যানেলের উচ্চতা 8% পাওয়া যায় এবং, যেহেতু এটি গেম এরিয়ার নীচের অংশকে কভার করবে, তাই এর প্রস্থও 100% হবে, যেমনটি চিত্র 2-এ দেখা গেছে।

চিত্র 2: শতাংশে গেম এরিয়া শিশু উপাদানের মাত্রা

এখন যেহেতু আপনি গেম এরিয়া এবং এর চাইল্ড এলিমেন্টের মাত্রা নির্ধারণ করেছেন, আপনি নিচের মত দুটি ভিতরের উপাদানের জন্য CSS প্রপার্টি একসাথে রাখতে পারেন:

#gameCanvas {
  width: 100%;
  height: 100%;
}

#statsPanel {
  position: absolute;
  width: 100%;
  height: 8%;
  bottom: 0;
  opacity: 0.8;
}

গেমটির আকার পরিবর্তন করুন

এখন আপনি উইন্ডোটির আকার পরিবর্তন করার জন্য একটি ফাংশন তৈরি করতে প্রস্তুত। প্রথমে, প্যারেন্ট গেম এরিয়া ডকুমেন্ট এলিমেন্টের একটি রেফারেন্স নিন।

var gameArea = document.getElementById('gameArea');

যেহেতু আপনি সঠিক প্রস্থ বা উচ্চতা সম্পর্কে উদ্বিগ্ন নন, তাই আপনাকে পরবর্তী তথ্যের অংশটি সেট করতে হবে প্রস্থ থেকে উচ্চতার অনুপাত। 400 পিক্সেল চওড়া এবং 300 পিক্সেল উঁচু একটি গেম এরিয়ার আপনার পূর্বের রেফারেন্স ব্যবহার করে, আপনি জানেন যে আপনি 4 ইউনিট চওড়া এবং 3 ইউনিট উচ্চে আকৃতির অনুপাত সেট করতে চান৷

var widthToHeight = 4 / 3;

যেহেতু যখনই উইন্ডোটির আকার পরিবর্তন করা হয় তখন এই ফাংশনটি বলা হয়, আপনি উইন্ডোর নতুন মাত্রাগুলিও ধরতে চান যাতে আপনি আপনার গেমের মাত্রাগুলিকে সামঞ্জস্য করতে সক্ষম হন। উইন্ডোর innerWidth এবং innerHeight বৈশিষ্ট্য ব্যবহার করে এটি খুঁজুন।

var newWidth = window.innerWidth;
var newHeight = window.innerHeight;

ঠিক যেমন আপনি প্রস্থ থেকে উচ্চতার অনুপাত নির্ধারণ করেছেন, এখন আপনি উইন্ডোর বর্তমান প্রস্থ থেকে উচ্চতার অনুপাত নির্ধারণ করতে পারেন:

var newWidthToHeight = newWidth / newHeight;

এটি আপনাকে চিত্র 3-এ দেখানো হিসাবে গেমটি উল্লম্বভাবে বা অনুভূমিকভাবে স্ক্রীনটি পূরণ করতে হবে কিনা তা সিদ্ধান্ত নিতে দেয়।

চিত্র 3: আকৃতির অনুপাত বজায় রাখার সময় উইন্ডোতে গেম এরিয়া উপাদান ফিট করা

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

এটি করার জন্য, বর্তমান উইন্ডোর প্রস্থ থেকে উচ্চতার অনুপাতের সাথে আপনার পছন্দসই প্রস্থ থেকে উচ্চতার অনুপাত পরীক্ষা করুন এবং নিম্নরূপ যথাযথ সমন্বয় করুন:

if (newWidthToHeight > widthToHeight) {
  // window width is too wide relative to desired game width
  newWidth = newHeight * widthToHeight;
  gameArea.style.height = newHeight + 'px';
  gameArea.style.width = newWidth + 'px';
} else { // window height is too high relative to desired game height
  newHeight = newWidth / widthToHeight;
  gameArea.style.width = newWidth + 'px';
  gameArea.style.height = newHeight + 'px';
}

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

gameArea.style.marginTop = (-newHeight / 2) + 'px';
gameArea.style.marginLeft = (-newWidth / 2) + 'px';

আপনি স্বয়ংক্রিয়ভাবে ফন্টের আকার সামঞ্জস্য করতে চান। যদি আপনার কাছে এম ব্যবহার করে সমস্ত চাইল্ড উপাদান থাকে, তাহলে আপনি গেমএরিয়া ডিভি ব্লকের ফন্ট সাইজ সিএসএস প্রপার্টিটিকে এর আকার দ্বারা নির্ধারিত একটি মানতে সেট করতে পারেন।

gameArea.style.fontSize = (newWidth / 400) + 'em';

অবশেষে, আপনি ক্যানভাস অঙ্কন মাত্রা তার নতুন প্রস্থ এবং উচ্চতা মেলে করতে চান. মনে রাখবেন যে গেমের বাকি কোডগুলিকে অবশ্যই একটি গতিশীল ক্যানভাস রেজোলিউশনের জন্য মিটমাট করার জন্য গেম ইঞ্জিনের মাত্রাগুলিকে ক্যানভাস অঙ্কন মাত্রা থেকে আলাদা রাখতে হবে৷

var gameCanvas = document.getElementById('gameCanvas');
gameCanvas.width = newWidth;
gameCanvas.height = newHeight;

তাই সম্পূর্ণ পুনরায় আকার ফাংশন এই মত কিছু দেখতে পারে:

function resizeGame() {
    var gameArea = document.getElementById('gameArea');
    var widthToHeight = 4 / 3;
    var newWidth = window.innerWidth;
    var newHeight = window.innerHeight;
    var newWidthToHeight = newWidth / newHeight;
    
    if (newWidthToHeight > widthToHeight) {
        newWidth = newHeight * widthToHeight;
        gameArea.style.height = newHeight + 'px';
        gameArea.style.width = newWidth + 'px';
    } else {
        newHeight = newWidth / widthToHeight;
        gameArea.style.width = newWidth + 'px';
        gameArea.style.height = newHeight + 'px';
    }
    
    gameArea.style.marginTop = (-newHeight / 2) + 'px';
    gameArea.style.marginLeft = (-newWidth / 2) + 'px';
    
    var gameCanvas = document.getElementById('gameCanvas');
    gameCanvas.width = newWidth;
    gameCanvas.height = newHeight;
}

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

window.addEventListener('resize', resizeGame, false);
window.addEventListener('orientationchange', resizeGame, false);

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

সারসংক্ষেপ

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