Is this a correct usage of a Class [p5.js]?

Battlesquid

Today I wanted to create a UI using p5.play, so I made some code for the class:

var testButton;

function uiButton(width, height, xPos, yPos)
{
  this.width = width;
  this.height = height;
  this.x = xPos;
  this.y = yPos;
  function newSprite() {
    this.createSprite(this.xPos, this.yPos, this.width, this.height);
    this.setCollider('rectangle', 0, 0, this.width, this.height);
  }
}

And some code to create the button:

testButton = new uiButton(100, 50, 100, 200);
testButton.newSprite();

However, this does not work. Is there something that needs to be changed? Would appreciate the help :)

blindfish

I just quoted the Objects example in another answer :)

OK - editing to clarify your error: you've nested this.createSprite() and this.setCollider() under function newSprite(). Assuming createSprite and setCollider are intended as methods of uiButton then you should simply remove function newSprite() altogether...

Note that object child functions are attached to this (and not inside a nested function) - so try this structure:

function uiButton() {
  //define properties:
  //snip

  // define methods:
  this.createSprite();
  this.setCollider();
}

BUT... this is not a good example to follow if you plan to create many instances of the object. In that case you need to look into prototype-based 'methods' - essentially:

//pseudo-class
function UiButton() {
  // 'constructor'
  this.x = 123;
}

// 'class' method is actually defined outside the 'class' declaration...
// but attached to the 'class' prototype:
UiButton.prototype.createSprite = function() {
  console.log(this.x);
}

var foo = new UiButton();
foo.createSprite(); // outputs: 123

Or you can use an ES6 'class' which is essentially just some sugar-coating around the above prototypal inheritance...

Battlesquid

Okay, I think a bit more elaboration and corrections on my end would help :)

Looking back at the code, what I had meant was to assign a created sprite to the newly created object. I wanted something like:

this = createSprite(this.x, this.y, this.width, this.height);

As for setting the collider for the sprite, I looked more at the p5.play API docs, and found a function that allows me to set the default collider for the newly created sprite. I imagine that it is used something like this:

this.setDefaultCollider();

Since there are no arguments to this, I assume it's a function inside p5.play, so that leaves me to worry about creating the actual sprite.

So basically, get the name of the object I'm creating and turn it into a sprite. Hope this makes sense. Please don't hesitate to point out any flaws I may have made in my explanation of what I'm trying to do, as I am very new to the concept of OOP.

:)

(PS, I appreciate the information you provided on classes and all that. I will look into them more as I continue using OOP).

GoToLoop

this.createSprite(this.xPos, this.yPos, this.width, this.height);

• JS' keyword this inside a function refers to the current object which had invoked it:
  https://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
  https://DmitriPavlutin.com/gentle-explanation-of-this-in-javascript/
• However, createSprite() is a method which had been appended to class p5 by the library p5.play.
• Given all the p5's members are already available globally, we access them directly w/o prefixing them w/ any reference.
• Thus it's just width, ellipse(), createSprite(), etc. They're all global!
• But if you insist to prefix them w/something, use window: window.width, window.ellipse(), window.createSprite():
  https://Developer.Mozilla.org/en-US/docs/Web/API/Window/window

GoToLoop

• As you already know, createSprite() instantiates and returns a new Sprite object:
  http://p5play.MolleIndustria.org/docs/classes/p5.play.html#method-createSprite
  http://p5play.MolleIndustria.org/docs/classes/Sprite.html
• And if you wanna do all that inside a constructor(), I highly recommend JS' keyword class:
  https://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class
  https://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor

class UiButton {
  constructor(x=0, y=x, w=1, h=w) {
    ( this.btn = createSprite(x, y, w, h) ).setCollider('rectangle', 0, 0, w, h);
  }
}

Battlesquid

Nice! Would I then create a new UiButton object by doing this?

testButton = new UiButton(args);

Or since there are already values in the constructor arguments (if I understand correctly), would it just be:

testButton = new UiButton();

GoToLoop

Or since there are already values in the constructor arguments...

Those are default values in case they get undefined.
So for just testButton = new UiButton;, y = x = 0 & h = w = 1. :-@

https://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters

Battlesquid

It works! Thanks for sorting out my horrible code GoToLoop, and thanks blindfish for introducing me to more capabilities of OOP :)