libGDX গেম ডেভেলপমেন্ট টিউটোরিয়াল: Camera, Viewport, Projection Matrix

by

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

দুই ধরণের ক্যামেরা রয়েছে। Orthographic এবং Perspective

আমরা যখন 2D গেম তৈরি করব, তখন ব্যবহার করব অর্থোগ্রাফিক। আর যখন 3D গেম তৈরি কব, তখন ব্যবহার করব পাসপেক্টিভ। অর্থোগ্রাফিক ভিউপোর্টে z অক্ষ কাউন্ট করে না। তাই একটা অবজেক্ট দূরে থাকুক বা কাছে থাকুক, সব কিছু একই তলে দেখায়। পাসপেক্টিভ ক্যামেরা বাস্তব জগতের মত। দূরের বস্তু ছোট দেখব, কাছে বস্তু বড় দেখব।

Viewport:
এক একটা স্ক্রিন্ট এক এক সাইজের। এক একটা স্ক্রিনের রেজুলেশন এক এক রকম। যখন আমরা গেম তৈরি করব, তখন আমাদের গেম এক এক একটা স্ক্রিনে এক এক রকম দেখাবে। এ সমস্যাটা সমাধান করার জন্য রয়েছে Viewports. আমাদের গেম প্রত্যেকটা ডিভাইসে কেমন দেখাবে, তাই আমরা ঠিক করে দিব Viewport দিয়ে।

Projection Matrix: আমরা যে গেমওয়ার্ল্ড হচ্ছে 3D. কিন্তু আমাদের স্ক্রিন হচ্ছে 2D. আমাদের অবজেক্ট গুলোর থাকে বিভিন্ন পয়েন্ট বা Coordinate এ। একটা একটা থেকে দূরে, কাছে ইত্যাদি। এ Coordinate গুলো ম্যাট্রিক্স দিয়ে রিপ্রেজেন্ট করে। আর প্রজেকশন ম্যাট্রিক্সের কাজ হচ্ছে Camera পয়েন্ট থেকে Screen পয়েন্ট এ কনভার্ট করা।

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

প্রথমে একটা বৃত্ত আঁকি। আমরা Drawing টিউটোরিয়ালে দেখেছি কিভাবে একটি বৃত্ত আঁকতে হয়। নিচে আবার দিয়ে দিলাম বৃত্ত আঁকার কোড।

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer;

public class MyGdxGame extends ApplicationAdapter {
ShapeRenderer renderer;
// Circle X Position, Y Position and Radius
private static final float X_POSITION = 200;
private static final float Y_POSITION = 200;
private static final float raious = 150;

@Override
public void create () {
renderer = new ShapeRenderer();
}

@Override
public void render () {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

renderer.begin(ShapeRenderer.ShapeType.Filled);
renderer.setColor(Color.WHITE);

renderer.circle(X_POSITION,Y_POSITION, raious);

renderer.end();
}
}

ক্যামেরা দিয়ে আমরা বৃত্তটি বরাবর ফোকাস করব। তাহলে আমরা শুধু বৃত্তটাই দেখব। কোডঃ

 

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer;
import com.badlogic.gdx.utils.viewport.FitViewport;
import com.badlogic.gdx.utils.viewport.Viewport;

public class Camera extends ApplicationAdapter {
	ShapeRenderer renderer;

	// Circle X Position, Y Position and Radius
	private static final  float X_POSITION = 200;
	private static final float Y_POSITION = 200;
	private static final float raious = 150;

	// Declare Camera

	OrthographicCamera camera;
	private Viewport viewport;

	@Override
	public void create () {
		renderer = new ShapeRenderer();
		// Initialize the camera
		camera = new OrthographicCamera();

		// set camera position
		camera.position.set(X_POSITION,Y_POSITION,0);

		// set viewport
		viewport = new FitViewport(800, 480, camera);
	}
	@Override
	public void resize(int width, int height) {

		viewport.update(width, height);

	}

	@Override
	public void render () {
		Gdx.gl.glClearColor(0, 0, 0, 1);
		Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

		// update camera
		camera.update();
		// set Projection Matrix
		renderer.setProjectionMatrix(camera.combined);

		renderer.begin(ShapeRenderer.ShapeType.Filled);
		renderer.setColor(Color.WHITE);

		renderer.circle(X_POSITION,Y_POSITION, raious);

		renderer.end();
	}
}

এখানে আমরা ক্যামেরা হিসেবে ব্যবহার করেছি Orthographic Camera এবং Viewport হিসেবে ব্যবহার করেছি FitViewport। FitViewport  আমাদের অবজেক্ট স্ক্রিনের aspect ratio অনুযায়ী স্ক্রিনে দেখায়। বাড়তি অংশ কালো রঙ দিয়ে পূর্ণ করে দেয়। আমরা যখন মুভি দেখি, তখন হয়তো দেখি যে মুভির aspect ratio  যত, ততটুকু দেখিয়ে বাকিং অংশ ব্ল্যাঙ্ক দেখায়। তেমনি।  অন্যান্য Viewport গুলো হচ্ছেঃ

  • StretchViewport
  • FillViewport
  • ScreenViewport
  • ExtendViewport
  • CustomViewport

এগুলো সম্পর্কে আস্তে আস্তে জানব 🙂

 

প্রজেক্টের সোর্স কোড গুলো ডাউনলোড করা যাবে গিটহাব থেকে। প্রত্যেকটা প্রজেক্ট আলাদা আলাদা ফোল্ডারে রয়েছে। ঐখান থেকে ডাউনলোড করে নিয়ে কাজ করা যাবে। গিটহাব লিঙ্ক।

Leave a Reply