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

Today I wanted to create a UI using, 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);

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


  • edited November 2017 Answer ✓

    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:
      // define methods:

    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:

    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() {
    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...

  • edited November 2017

    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 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:


    Since there are no arguments to this, I assume it's a function inside, 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).

  • edited November 2017 Answer ✓

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

  • edited November 2017 Answer ✓

    class UiButton {
      constructor(x=0, y=x, w=1, h=w) {
        ( this.btn = createSprite(x, y, w, h) ).setCollider('rectangle', 0, 0, w, h);
  • 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();
  • edited November 2017 Answer ✓

    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. :-@

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

Sign In or Register to comment.