How do I make my button an image?

BowDown097 · April 2017

So I'm trying to make a main menu for a game I'm making, but I'll need images for the buttons. Unfortunately, when using the button() function and using all the appropriate stuff, the button works, but I can't make the button an image. If I try making the button an image, the button just displays "[Object] Object". Am I doing something wrong?

button = createButton(img5); button.position(100, 100); //test position, not final button.mousePressed(gotoGame);

kfrajer · April 2017

I believe when you create a button, you can only assign a label: https://p5js.org/reference/#/p5/createButton

Next not tested:

You can add your button in your html code and then access it in your js:

In index.html for example:

<input id="ibut" type="image" src="submit.gif" alt="Submit">

In your sketch.js:

var ib=select('#ibut');
ib.position(100,100);
ib.mousePressed(gotoGame);

Kf

GoToLoop · April 2017

https://forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text

You can use createImg() instead: https://p5js.org/reference/#/p5/createImg
Given it's also a p5.Element: https://p5js.org/reference/#/p5.Element
We can attach a mousePressed() or mouseClicked() callback on it as well: https://p5js.org/reference/#/p5.Element/mousePressed

// https://forum.Processing.org/two/discussion/22244/
// how-do-i-make-my-button-an-image#Item_2

// GoToLoop (2017-Apr-27)

"use strict";

const IMG_URL = 'assets/my_img.png';
let imgBtn;

function preload() {
  imgBtn = createImg(IMG_URL, 'My Clickable Image');
}

function setup() {
  imgBtn.position(100, 100).mousePressed(gotoGame);
}

function gotoGame() {
  // blah, blah, blah...
}

BowDown097 · April 2017

Thank you for the help, GoToLoop and kfrajer. :)

Howdy, Stranger!

Categories

In this Discussion

How do I make my button an image?

Answers