ভিউপোর্ট/ক্যামেরা কনসেপ্ট
বড় গেম ওয়ার্ল্ড বা ব্যাকগ্রাউন্ড ইমেজের একটি অংশ ক্যানভাসে দেখানোর জন্য drawImage()-এর ৯-প্যারামিটার ভার্সন ব্যবহার করুন: সোর্স রেক্ট্যাঙ্গেল (crop) → ডেস্টিনেশন রেক্ট্যাঙ্গেল (viewport)।
সিনট্যাক্স
const game = document.getElementById('game');
const ctx = game.getContext('2d');
const world = { width: 2000, height: 1500 };
const view = { width: 800, height: 600 };
let camera = { x: 0, y: 0 }; // ওয়ার্ল্ড কোঅর্ডিনেট
function render() {
// ১. ক্যানভাস ক্লিয়ার
ctx.clearRect(0, 0, view.width, view.height);
// ২. ব্যাকগ্রাউন্ড ড্র (ক্যামেরা পজিশন অনুযায়ী ক্রপ)
ctx.drawImage(
backgroundImg,
camera.x, camera.y, view.width, view.height, // সোর্স: ওয়ার্ল্ডের দৃশ্যমান অংশ
0, 0, view.width, view.height // ডেস্ট: পুরো ক্যানভাস
);
// ৩. গেম অবজেক্ট ড্র (ওয়ার্ল্ড কোঅর্ডিনেট → ভিউ কোঅর্ডিনেট)
// player.x, player.y ওয়ার্ল্ড কোঅর্ডিনেট
const screenX = player.x - camera.x;
const screenY = player.y - camera.y;
ctx.drawImage(playerImg, screenX, screenY);
requestAnimationFrame(render);
}
// ক্যামেরা ফলো লজিক
function updateCamera() {
camera.x = Math.max(0, Math.min(player.x - view.width/2, world.width - view.width));
camera.y = Math.max(0, Math.min(player.y - view.height/2, world.height - view.height));
}
requestAnimationFrame(render);
কী পয়েন্ট: সোর্স রেক্ট (sx, sy, sWidth, sHeight) ক্যামেরার পজিশন অনুযায়ী চেঞ্জ হয়, ডেস্ট রেক্ট ফিক্সড থাকে (ক্যানভাস সাইজ)।
