Oriented-Object-Programming with Example Code

Oriented Object Programming combines a group of related variables and functions into unit which is called an object. We refer to these variables as properties and the functions as methods.

Let’s say we create a class robot, we need to represent each different robots or entities. That’s where classes and objects come in. In python, you can create a custom constructor __init__ and you need to add self keyword and arguments that you want to add. In order to prevent attribute error, we use constructor to assign same attribute variables

class Robot:
    def __init__(self, name, color, weight):
        self.name = name
        self.color = color
        self.weight = weight

    def introduce_self(self):
        print(f"My name is {self.name}")
        
robot1 = Robot("Tom", "red", 30)
robot2 = Robot("Sean", "blue", 40)

When I want to run this function introduce self on this object, I can write the name of object and dot function name to execute

robot1.introduce_self()

robot2.introduce_self()

The output will be:

My name is Tom
My name is Sean

Example2: OOP in JavaScript Game development

I’m currently developing MMORPG-like game and using OOP would be a great strategy to create multiple buttons since I can reuse the button class.

Before using OOP, this is code for the title page which shows title of game and has event listeners to start button:

If I want to add another button and different event, I need to add a code like this:

// create a Button
this.button = this.add.image(this.scale.width / 2 , this.scale.height * 0.65, 'button1');
this.button.setInteractive();
this.buttonText = this.add.text(0, 0, 'Start', { fontSize: '26px', fill: '#fff', fontFamily: 'Arial' });
Phaser.Display.Align.In.Center(this.buttonText, this.button);

this.button.on('pointerdown', () => {
    this.scene.start('Game');
    console.log('Game Started');
})
this.button.on('pointerover', () => {
    this.button.setTexture('button2');
    console.log('pointerover');
})
this.button.on('pointerout', () => {
    this.button.setTexture('button1');
    console.log('pointerout');
})

// create another button

this.button2 = this.add.image(this.scale.width / 2 , this.scale.height * 0.75, 'button1');
this.button2.setInteractive();
this.buttonText = this.add.text(0, 0, 'Email to Sean', { fontSize: '26px', fill: '#fff', fontFamily: 'Arial' });
Phaser.Display.Align.In.Center(this.buttonText, this.button2);

this.button2.on('pointerdown', () => {
    alert('dlatlrrb@gmail.com <3')
})
this.button2.on('pointerover', () => {
    this.button2.setTexture('button2');
})
this.button2.on('pointerout', () => {
    this.button2.setTexture('button1');
})       

To do this, I implemented UI Button Class and import to title page and pass the arguments.

class UiButton extends Phaser.GameObjects.Container {
    constructor(scene, x, y, key, hoverKey, text, targetCallback) {
        super(scene, x, y);
        this.scene = scene; // the scene that this button belongs to
        this.x = x; // x position of the container
        this.y = y; // y position of the container
        this.key = key; // the background image of our button
        this.hoverKey = hoverKey; // the image that will be displayed when the player hovers over the button
        this.text = text; // the text that will be displayed on the button
        this.targetCallback = targetCallback; // the callback function that will be executed when the button is clicked
        
        // create our UI Button 
        this.createButton();
        // add this container to our phaser scene 
        this.scene.add.existing(this);
    }

    createButton() {
        // create play game button
        this.button = this.scene.add.image(0, 0, 'button1');

        // make button interactive
        this.button.setInteractive();
        this.button.setScale(1.4);

        // create a Button text
        this.buttonText = this.scene.add.text(0, 0, this.text, { fontSize: '40px', fill: '#fff', fontFamily: 'Arial' });

        // center the button text inside the UI button
        Phaser.Display.Align.In.Center(this.buttonText, this.button);
        
        // add the two game objects to our container
        this.add(this.button);
        this.add(this.buttonText);

        // add event listeners to the button
        this.button.on('pointerdown', () => {
            this.targetCallback();
        })
        this.button.on('pointerover', () => {
            this.button.setTexture(this.hoverKey);
        })
        this.button.on('pointerout', () => {
            this.button.setTexture(this.key);
        })
    }
  }
  
  

After applying OOP concept, the code looks like that:

// Create a Play Button with a more organized and clean approach
this.startGameButton = new UiButton(
  this, 
  this.scale.width / 2, 
  this.scale.height * 0.65, 
  'button1', 
  'button2', 
  'Start', 
  this.startScene.bind(this, 'Game')
).setScale(0.8);

// Create another button in a cleaner format
this.anotherButton = new UiButton(
  this, 
  this.scale.width / 2, 
  this.scale.height * 0.75, 
  'button1', 
  'button2', 
  'Email to Sean', 
  this.emailMe.bind(this, 'dlatlrrb@gmail.com')
).setScale(0.8);

// Function to start a scene
startScene(targetScene) {
  this.scene.start(targetScene);
}

// Function to handle email action
emailMe(target) {
  alert(target);
}

It works!

GitHub Link for UI Button class

GitHub Link for Title Page