3D Button Engine [pen]

See inside

Click the button for a press animation. Hit space to create a new button under your pointer.


• Initialize: Clears the data from the last run. You don't have to use this block if you want to use buttons you've already created, but I personally prefer to re-create them at the beginning of every run (just to make sure nothing goes wrong). If you do use it, be sure to do so BEFORE you create any new buttons.

• New button: This is where the magic happens. I'll walk you through its parameters:
- Name: This is the name saved for the button. When you click a button, its name will be broadcasted.
- X-Y position: The coordinates for the **center** of the button (the top of the button, not the vertical part).
- Color: The button color. This uses the usual pen color system, I'm sure you can figure it out.
- Height: This is the height of the vertical bottom part of the button, in pixels.
- Width: The maximum width of the button, in pixels.
- Depth: This is the height, in pixels, of the top/face of the button.
- Border-radius: How round the button's corners are. If you imagine a circle in each corner of the button, this would be its radius.

• Delete button: Delete a button by name.

• Name: When a button is clicked, its name will be broadcasted. Additionally, its status in the list "clicked" will change to "true"
• "Render button text": This is broadcasted after each time the buttons are redrawn, just in case you want to incorporate a text engine (or anything else) atop the buttons.

Notes and Credits

TOP LOVED 1/3-8/15

Inspired by the thumbnail for @WillboSwaggins' curated project. Also, it just seemed like a thing people needed (I looked around for something similar but didn't see it). So I made it.

I did the rounded corners using bits of the semicircle block from my Google loader.

OOH I SHOULD'VE POSTED THIS ON MY TEST ACCOUNT. Ah well, there's always next time. I swear I'll share something there eventually. (It's @NickyTest for those of you who're wondering)

Feel free to use for anything with credit :)

• If you have two (or more) buttons overlapping, only the most recently-created one will animate when pressed. However, both will broadcast their names and show up as clicked in the "clicked" list.
• When you click one button, it redraws all of them, so the more buttons you have the slower it gets, for me it's really clear by #5. However, I've tested it with as many as 75 and it's worked slowly but otherwise fine.
• A border-radius of 2 or less will break stuff. Just don't do it. And a really huge border radius will look funny (but still work)
• Buttons touching the top will flood out onto the everywhere and break the everything

• Built-in text engine (it'd be someone else's tho)
• Ease-in-ease-out on the push animation
• Animation timer-based, doesn't slow down under stress
• Slight gradient on the button-top could be cool
* This list item has an asterisk as its bullet just to mess with you
• Variable pen shade, if I feel like it
• Change pen size for faster drawing (or at least to fill 'em in)
• Huh... you know what? What if I had it only redraw/draw over the button being pushed? Let's try that, it should get faster
• Partial press effect on hover?

Shared: 27 Dec 2014 Modified: 11 Jan 2015
Favorite this project 145
Love this project 215
Total views 3375
View the remix tree  6
More projects by NickyNouse