super fun button tests (button object ui -- PLUGIN RELEASED!)

Post reply
Not favoritedFavorited Favorited 0 favourites
  • 9 posts
From the Asset Store
Mayan Temple - Platformer Tileset
$15 USD
Hand-painted tiles, objects, animated objects, and background to build a colorful Mayan civilization environment.
ludicarts's avatar
ludicarts

  • I've been on a bit of a side quest to create a powerful yet simple to use procedural ui system.

    I'm currently playing about with ui elements, experimenting with interesting ways to do things and created a fun plugin.

    The plugin uses polygons, and 3 states, normal, hover and pressed.

    You simply set the polygons position, shape, color etc in each state and the plugin teens the values on state changes.

    Here is an example,

    And here is how it was made using events.

    First define the button size and position. 

    -> System: Create object NeoButton on layer 0 at (100, 100), create hierarchy: False, template: ""
-> NeoButton: Set size to 200 x 60

    Then we define the buttons colours, and a drop shadow for both normal to hover state directions. 

    -> NeoButton: Set Hover to Normal: BG "255,255,255,1", Bdr "0,0,0,1" 3px, Shadow "0,0,0,1" (X:7, Y:7, Blur:0), Radius(TL:"0" TR:"0" BR:"0" BL:"0")
-> NeoButton: Set Normal to Hover: BG "41,111,187,1", Bdr "41,111,187,1" 3px, Shadow "0,66,128,1" (X:9, Y:9, Blur:0), Radius(TL:"0" TR:"0" BR:"0" BL:"0")

    Add some text. 

    -> NeoButton: Set Text "text1" to "NEO-BRUTALIST" ("Arial" 16pt, Bold: True, Box: 0x0)
-> NeoButton: Set Text "text1" (Normal to Hover): Color "255,255,255,1", Scale 1.0, Pos X:0px Y:0px, Clipped: True, Z: Top (Above Button), Origin: Center

    Make the text change colour, and define the pressed state, moving the button downwards to give the impression of a press. 

    -> NeoButton: Set Pressed to Normal: BG "255,255,255,1", Bdr "0,0,0,1" 3px, Shadow "0,0,0,1" (X:7, Y:7, Blur:0), Radius(TL:"0" TR:"0" BR:"0" BL:"0")
-> NeoButton: Set Pressed to Hover: BG "41,111,187,1", Bdr "41,111,187,1" 3px, Shadow "0,66,128,1" (X:9, Y:9, Blur:0), Radius(TL:"0" TR:"0" BR:"0" BL:"0")
-> NeoButton: Set Normal to Hover Transform: Pos X:-2px Y:-2px, Skew X:0° Y:0°, Size 100% x 100%
-> NeoButton: Set Main Body transition Any Target: 0.2s (Quad), Delay: 0s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Hover to Pressed: BG "41,111,187,1", Bdr "41,111,187,1" 3px, Shadow "0,66,128,1" (X:0, Y:0, Blur:0), Radius(TL:"0" TR:"0" BR:"0" BL:"0")
-> NeoButton: Set Hover to Pressed Transform: Pos X:7px Y:7px, Skew X:0° Y:0°, Size 100% x 100%

    Now we add a shine effect. This is just a rectangle, rotated at an angle, and blurred. 

    -> NeoButton: Set Layer "Shine" (Hover to Normal): Color "255,255,255,0", Size 20%x800%, Pos -100%x150%, Angle 120°, Radius(TL:"0" TR:"0" BR:"0" BL:"0"), Clipped: True, Z: Top (Above Button), Blend: Normal, Origin: Top Left, Blur: 10
-> NeoButton: Set Layer "Shine" (Normal to Hover): Color "255,255,255,0.3", Size 20%x800%, Pos 250%x150%, Angle 120°, Radius(TL:"0" TR:"0" BR:"0" BL:"0"), Clipped: True, Z: Top (Above Button), Blend: Normal, Origin: Top Left, Blur: 10
-> NeoButton: Set Layer "Shine" transition Any Target: 0.5s (Linear), Delay: 0s, Repeat: 0, PingPong: False, Cond: Hover or Pressed

    Then have the shine reverse on a press. 

    -> NeoButton: Set Layer "Shine" (Hover to Pressed): Color "255,255,255,0", Size 20%x800%, Pos -100%x150%, Angle 120°, Radius(TL:"0" TR:"0" BR:"0" BL:"0"), Clipped: True, Z: Top (Above Button), Blend: Normal, Origin: Top Left, Blur: 10

    and finally we can enable clipping so the shine only appears in the button area.

    Here are a few more simple examples i made quickly. 

    + (no conditions)
// popup
-> System: Create object NeoButton on layer 0 at (500, 130), create hierarchy: False, template: ""
-> NeoButton: Set Button origin to Center
-> NeoButton: Set size to 50 x 50
-> NeoButton: Set Main Body transition Any Target: 0.15s (Cubic), Delay: 0s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Normal to Hover: BG "24,119,242,1", Bdr "0,0,0,0" 0px, Shadow "0,0,0,0.3" (X:0, Y:12, Blur:40), Radius(TL:"25" TR:"25" BR:"25" BL:"25")
-> NeoButton: Set Hover to Normal: BG "255,255,255,1", Bdr "0,0,0,0" 0px, Shadow "0,0,0,0.3" (X:0, Y:12, Blur:40), Radius(TL:"25" TR:"25" BR:"25" BL:"25")
-> NeoButton: Set Hover to Pressed Transform: Pos X:0px Y:6px, Skew X:0° Y:0°, Size 100% x 100%
-> NeoButton: Set Layer "popupShadow" (Hover to Normal): Color "0,0,0,0", Size 200%x75%, Pos 0%x10%, Angle 0°, Radius(TL:"5" TR:"5" BR:"5" BL:"5"), Clipped: False, Z: Top (Above Button), Blend: Normal, Origin: Bottom, Blur: 30
-> NeoButton: Set Layer "popupShadow" (Normal to Hover): Color "0,0,0,0.3", Size 200%x75%, Pos 0%x10%, Angle 0°, Radius(TL:"5" TR:"5" BR:"5" BL:"5"), Clipped: False, Z: Top (Above Button), Blend: Normal, Origin: Bottom, Blur: 30
-> NeoButton: Pin Layer "popupShadow" to Layer "popup" (Pos: True, Angle: True, Opacity: True)
-> NeoButton: Set Layer "popup" transition Any Target: 0.2s (Back), Delay: 0s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Pin Layer "popupPOINT" to Layer "popup" (Pos: True, Angle: True, Opacity: True)
-> NeoButton: Set Layer "popup" (Hover to Normal): Color "24,119,242,0", Size 200%x75%, Pos 50%x60%, Angle 0°, Radius(TL:"5" TR:"5" BR:"5" BL:"5"), Clipped: False, Z: Top (Above Button), Blend: Normal, Origin: Bottom, Blur: 0
-> NeoButton: Set Layer "popup" transition Hover to Normal: 0s (Linear), Delay: 0s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Layer "popup" (Normal to Hover): Color "24,119,242,1", Size 200%x75%, Pos 50%x-30%, Angle 0°, Radius(TL:"5" TR:"5" BR:"5" BL:"5"), Clipped: False, Z: Top (Above Button), Blend: Normal, Origin: Bottom, Blur: 0
-> NeoButton: Set Layer "popup" (Hover to Pressed): Color "24,119,242,0", Size 200%x75%, Pos 50%x-30%, Angle 0°, Radius(TL:"5" TR:"5" BR:"5" BL:"5"), Clipped: False, Z: Top (Above Button), Blend: Normal, Origin: Bottom, Blur: 0
-> NeoButton: Set Layer "popupPOINT" (Hover to Normal): Color "24,119,242,0", Size 20%x20%, Pos -4%x5%, Angle 48°, Radius(TL:"0" TR:"0" BR:"0" BL:"0"), Clipped: False, Z: Top (Above Button), Blend: Normal, Origin: Bottom, Blur: 0
-> NeoButton: Set Layer "popupPOINT" (Normal to Hover): Color "24,119,242,1", Size 20%x20%, Pos -4%x5%, Angle 48°, Radius(TL:"0" TR:"0" BR:"0" BL:"0"), Clipped: False, Z: Top (Above Button), Blend: Normal, Origin: Bottom, Blur: 0
-> NeoButton: Set Text "F" to "f" ("Arial" 28pt, Bold: True, Box: 0x0)
-> NeoButton: Set Text "F" (Hover to Normal): Color "0,0,0,1", Scale 1, Pos X:0px Y:2px, Clipped: False, Z: Top (Above Button), Origin: Center
-> NeoButton: Set Text "F" (Normal to Hover): Color "255,255,255,1", Scale 1, Pos X:0px Y:2px, Clipped: False, Z: Top (Above Button), Origin: Center
-> NeoButton: Set Text "F" transition Any Target: 0.15s (Quad), Delay: 0s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Text "F" transition Hover to Normal: 0s (Linear), Delay: 0s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Text "Face" to "Facebook" ("Arial" 12pt, Bold: False, Box: 400x200)
-> NeoButton: Set Text "Face" (Hover to Normal): Color "255,255,255,0", Scale 1, Pos X:0px Y:-19px, Clipped: False, Z: Top (Above Button), Origin: Center
-> NeoButton: Set Text "Face" (Normal to Hover): Color "255,255,255,1", Scale 1, Pos X:0px Y:-19px, Clipped: False, Z: Top (Above Button), Origin: Center
-> NeoButton: Pin Text "Face" to Layer "popup" (Pos: True, Angle: True, Opacity: True)

    + (no conditions)
// dot morph
-> System: Create object NeoButton on layer 0 at (200, 280), create hierarchy: False, template: ""
-> NeoButton: Set Button origin to Center
-> NeoButton: Set size to 50 x 50
-> NeoButton: Set Text "text1" to "Delete" ("Arial" 11pt, Bold: True, Box: 0x0)
-> NeoButton: Set Text "text1" transition Any Target: 0.3s (Quad), Delay: 0s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Text "text1" (Normal to Hover): Color "255,255,255,1", Scale 1.1, Pos X:0px Y:-10px, Clipped: True, Z: Top (Above Button), Origin: Center
-> NeoButton: Set Text "text1" (Hover to Normal): Color "255,255,255,1", Scale 0.8, Pos X:0px Y:-50px, Clipped: True, Z: Top (Above Button), Origin: Center
-> NeoButton: Set Normal to Hover: BG "225,69,69,1", Bdr "0,0,0,0" 0px, Shadow "0,0,0,0.3" (X:0, Y:0, Blur:20), Radius(TL:"25" TR:"25" BR:"25" BL:"25")
-> NeoButton: Set Hover to Normal: BG "20,20,20,1", Bdr "0,0,0,0" 0px, Shadow "0,0,0,0.3" (X:0, Y:0, Blur:20), Radius(TL:"25" TR:"25" BR:"25" BL:"25")
-> NeoButton: Set Normal to Hover Transform: Pos X:0px Y:0px, Skew X:0° Y:0°, Size 300% x 100%
-> NeoButton: Set Hover to Normal Transform: Pos X:0px Y:0px, Skew X:0° Y:0°, Size 100% x 100%
-> NeoButton: Set Hover to Pressed Transform: Pos X:0px Y:5px, Skew X:0° Y:0°, Size 300% x 100%
-> NeoButton: Set Text "icon" to "o" ("icon-works-webfont" 30pt, Bold: False, Box: 0x0)
-> NeoButton: Set Text "icon" transition Any Target: 0.3s (Quad), Delay: 0s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Text "icon" (Normal to Hover): Color "255,255,255,1", Scale 3, Pos X:0px Y:-20px, Clipped: True, Z: Top (Above Button), Origin: Top
-> NeoButton: Set Text "icon" (Hover to Normal): Color "255,255,255,1", Scale 0.5, Pos X:0px Y:-14px, Clipped: True, Z: Top (Above Button), Origin: Top

    + (no conditions)
// yellow
-> System: Create object NeoButton on layer 0 at (680, 100), create hierarchy: False, template: ""
-> NeoButton: Set size to 162 x 60
-> NeoButton: Set Button origin to Center
-> NeoButton: Set Hover to Normal: BG "55,255,55,0", Bdr "0,0,0,0" 4px, Shadow "0,0,0,0" (X:0, Y:0, Blur:0), Radius(TL:"20" TR:"20" BR:"20" BL:"20")
-> NeoButton: Set Normal to Hover: BG "55,255,55,1", Bdr "0,0,0,0" 4px, Shadow "0,0,0,0" (X:0, Y:0, Blur:0), Radius(TL:"0" TR:"0" BR:"0" BL:"0")
-> NeoButton: Set Main Body transition Normal to Hover: 0.8s (Quad), Delay: 0s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Normal to Hover Transform: Pos X:0px Y:0px, Skew X:0° Y:0°, Size 80% x 80%
-> NeoButton: Set Layer "c1" (Hover to Normal): Color "55,255,55,0.5", Size 100%x100%, Pos -100%x0%, Angle 0°, Radius(TL:"0" TR:"50" BR:"50" BL:"0"), Clipped: True, Z: Top (Above Button), Blend: Normal, Origin: Top Left, Blur: 0
-> NeoButton: Set Layer "c1" (Normal to Hover): Color "55,255,55,1", Size 115%x100%, Pos 0%x0%, Angle 0°, Radius(TL:"0" TR:"50" BR:"50" BL:"0"), Clipped: True, Z: Top (Above Button), Blend: Normal, Origin: Top Left, Blur: 0
-> NeoButton: Set Layer "c1" transition Normal to Hover: 0.6s (Quad), Delay: 0s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Layer "c1" transition Hover to Normal: 0.6s (Quad), Delay: 0.3s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Layer "c1" transition Pressed to Normal: 0.6s (Quad), Delay: 0.3s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Layer "c2" (Hover to Normal): Color "55,255,55,0.5", Size 100%x100%, Pos 100%x0%, Angle 0°, Radius(TL:"50" TR:"0" BR:"0" BL:"50"), Clipped: True, Z: Top (Above Button), Blend: Normal, Origin: Top Left, Blur: 0
-> NeoButton: Set Layer "c2" (Normal to Hover): Color "55,255,55,1", Size 115%x100%, Pos -15%x0%, Angle 0°, Radius(TL:"50" TR:"0" BR:"0" BL:"50"), Clipped: True, Z: Top (Above Button), Blend: Normal, Origin: Top Left, Blur: 0
-> NeoButton: Set Layer "c2" transition Normal to Hover: 0.6s (Quad), Delay: 0s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Layer "c2" transition Hover to Normal: 0.6s (Quad), Delay: 0.3s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Layer "c2" transition Pressed to Normal: 0.6s (Quad), Delay: 0.3s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Layer "dot" (Hover to Normal): Color "0,0,0,1", Size 0%x0%, Pos 50%x50%, Angle 0°, Radius(TL:"50%" TR:"50%" BR:"50%" BL:"50%"), Clipped: True, Z: Top (Above Button), Blend: Normal, Origin: Center, Blur: 0
-> NeoButton: Set Layer "dot" (Normal to Hover): Color "0,0,0,1", Size 150%x400%, Pos 50%x50%, Angle 0°, Radius(TL:"50%" TR:"50%" BR:"50%" BL:"50%"), Clipped: True, Z: Top (Above Button), Blend: Normal, Origin: Center, Blur: 0
-> NeoButton: Set Layer "dot" transition Normal to Hover: 0.6s (Cubic), Delay: 0.3s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Layer "dot" transition Hover to Normal: 0.6s (Cubic), Delay: 0s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Layer "dot" transition Pressed to Normal: 0.6s (Cubic), Delay: 0s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Text "t1" to "BUTTON" ("Arial" 18pt, Bold: False, Box: 0x0)
-> NeoButton: Set Text "t1" (Hover to Normal): Color "0,0,0,1", Scale 1.0, Pos X:0px Y:0px, Clipped: True, Z: Top (Above Button), Origin: Center
-> NeoButton: Set Text "t1" (Normal to Hover): Color "55,255,55,1", Scale 1.0, Pos X:0px Y:0px, Clipped: True, Z: Top (Above Button), Origin: Center
-> NeoButton: Set Text "t1" (Hover to Pressed): Color "55,255,55,1", Scale 1.0, Pos X:0px Y:130px, Clipped: True, Z: Top (Above Button), Origin: Center
-> NeoButton: Set Layer "t1" transition Normal to Hover: 0.4s (Quad), Delay: 0s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Layer "t1" transition Hover to Pressed: 2.2s (Quad), Delay: 0s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Text "t2" to "PRESSED" ("Arial" 16pt, Bold: False, Box: 0x0)
-> NeoButton: Set Text "t2" (Hover to Normal): Color "255,255,255,1", Scale 1.0, Pos X:0px Y:-50px, Clipped: True, Z: Top (Above Button), Origin: Center
-> NeoButton: Set Text "t2" (Hover to Pressed): Color "255,255,255,1", Scale 1.0, Pos X:0px Y:0px, Clipped: True, Z: Top (Above Button), Origin: Center
-> NeoButton: Set Text "t2" transition Any Target: 0.6s (Bounce), Delay: 0s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Text "t2" transition Pressed to Hover: 0.3s (Cubic), Delay: 0s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Text "t2" transition Pressed to Normal: 0.3s (Cubic), Delay: 0s, Repeat: 0, PingPong: False, Cond: Always

    + (no conditions)
// deal
-> System: Create object NeoButton on layer 0 at (700, 300), create hierarchy: False, template: ""
-> NeoButton: Set Button origin to Center
-> NeoButton: Set size to 150 x 50
-> NeoButton: Set Hover to Normal: BG "255,209,80,1", Bdr "0,0,0,1" 0px, Shadow "0,0,0,0.35" (X:0, Y:0, Blur:30), Radius(TL:"15" TR:"15" BR:"15" BL:"15")
-> NeoButton: Set Normal to Hover: BG "255,209,80,1", Bdr "0,0,0,1" 0px, Shadow "0,0,0,0.35" (X:0, Y:0, Blur:30), Radius(TL:"15" TR:"15" BR:"15" BL:"15")
-> NeoButton: Set Normal to Hover Transform: Pos X:0px Y:0px, Skew X:0° Y:0°, Size 120% x 120%
-> NeoButton: Set Main Body transition Any Target: 0.4s (Back), Delay: 0s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Layer "popuptop" (Hover to Normal): Color "242,96,118,1", Size 80%x90%, Pos 90%x50%, Angle 0°, Radius(TL:"15" TR:"15" BR:"15" BL:"15"), Clipped: False, Z: Back (Behind Shadow), Blend: Normal, Origin: Right, Blur: 0
-> NeoButton: Set Layer "popuptop" (Normal to Hover): Color "242,96,148,1", Size 80%x90%, Pos 90%x10%, Angle 15°, Radius(TL:"15" TR:"15" BR:"15" BL:"15"), Clipped: False, Z: Back (Behind Shadow), Blend: Normal, Origin: Right, Blur: 0
-> NeoButton: Set Layer "popupbottom" (Hover to Normal): Color "69,139,115,1", Size 80%x90%, Pos 10%x50%, Angle 0°, Radius(TL:"15" TR:"15" BR:"15" BL:"15"), Clipped: False, Z: Back (Behind Shadow), Blend: Normal, Origin: Left, Blur: 0
-> NeoButton: Set Layer "popupbottom" (Normal to Hover): Color "69,139,115,1", Size 80%x90%, Pos 10%x70%, Angle 20°, Radius(TL:"15" TR:"15" BR:"15" BL:"15"), Clipped: False, Z: Back (Behind Shadow), Blend: Normal, Origin: Left, Blur: 0
-> NeoButton: Set Text "t1" to "Get Offer" ("Arial" 16pt, Bold: True, Box: 0x0)
-> NeoButton: Set Text "t1" (Normal to Hover): Color "0,0,0,1", Scale 1.2, Pos X:0px Y:0px, Clipped: True, Z: Top (Above Button), Origin: Center
-> NeoButton: Set Text "ttop" to "Expires Soon!" ("Arial" 16pt, Bold: True, Box: 0x0)
-> NeoButton: Set Text "ttop" (Hover to Normal): Color "255,255,255,1", Scale 0.7, Pos X:-134px Y:0px, Clipped: False, Z: Back (Behind Shadow), Origin: Left
-> NeoButton: Pin Text "ttop" to Layer "popuptop" (Pos: True, Angle: True, Opacity: False)
-> NeoButton: Set Text "tbot" to "Act Now!" ("Arial" 16pt, Bold: True, Box: 0x0)
-> NeoButton: Set Text "tbot" (Hover to Normal): Color "255,255,255,1", Scale 0.9, Pos X:20px Y:0px, Clipped: False, Z: Back (Behind Shadow), Origin: Left
-> NeoButton: Pin Text "tbot" to Layer "popupbottom" (Pos: True, Angle: True, Opacity: True)

    Tagged:

  • Added image support. 

    + (no conditions)
// image button
-> System: Create object NeoButton on layer 0 at (500, 400), create hierarchy: False, template: ""
-> NeoButton: Set Button origin to Center
-> NeoButton: Set size to 150 x 50
-> NeoButton: Set Hover to Normal: BG "55,09,80,1", Bdr "0,0,0,1" 0px, Shadow "0,0,0,0.35" (X:0, Y:0, Blur:30), Radius(TL:"15" TR:"15" BR:"15" BL:"15")
-> NeoButton: Set Normal to Hover: BG "55,09,80,1", Bdr "0,0,0,1" 0px, Shadow "0,0,0,0.35" (X:8, Y:8, Blur:0), Radius(TL:"-15" TR:"-15" BR:"-15" BL:"-15")
-> NeoButton: Set Normal to Hover Transform: Pos X:0px Y:0px, Skew X:0° Y:0°, Size 120% x 120%
-> NeoButton: Set Hover to Pressed: BG "255,209,80,1", Bdr "0,0,0,1" 0px, Shadow "0,0,0,0.35" (X:0, Y:0, Blur:0), Radius(TL:"-15" TR:"-15" BR:"-15" BL:"-15")
-> NeoButton: Set Hover to Pressed Transform: Pos X:7px Y:7px, Skew X:0° Y:0°, Size 120% x 120%
-> NeoButton: Set Main Body transition Any Target: 0.4s (Back), Delay: 0s, Repeat: 0, PingPong: False, Cond: Always
-> NeoButton: Set Sprite Layer "SpriteIcon" (Hover to Normal) from Sprite: Tint "255,255,255,1", Size 100%x100%, Pos 50%x50%, Angle 0°, Radius(TL:"0" TR:"0" BR:"0" BL:"0"), Clipped: True, Z: Top (Above Button), Blend: Normal, Origin: Center
-> NeoButton: Set Sprite Layer "SpriteIcon" (Normal to Hover) from Sprite: Tint "255,255,255,1", Size 50%x50%, Pos 15%x50%, Angle 0°, Radius(TL:"50%" TR:"50%" BR:"50%" BL:"50%"), Clipped: True, Z: Top (Above Button), Blend: Normal, Origin: Center
-> NeoButton: Set Text "T1" to "Button" ("Arial" 16pt, Bold: True, Box: 0x0)
-> NeoButton: Set Text "T1" (Hover to Normal): Color "255,255,255,0", Scale 1.0, Pos X:0px Y:0px, Clipped: True, Z: Top (Above Button), Origin: Center
-> NeoButton: Set Text "T1" (Normal to Hover): Color "255,255,255,1", Scale 1.0, Pos X:25px Y:0px, Clipped: True, Z: Top (Above Button), Origin: Center
-> NeoButton: Set Text "T1" (Hover to Pressed): Color "0,0,0,1", Scale 1.0, Pos X:25px Y:0px, Clipped: True, Z: Top (Above Button), Origin: Center
-> NeoButton: Set Text "T1" transition Hover to Normal: 0s (Linear), Delay: 0s, Repeat: 0, PingPong: False, Cond: Always

    The plugin is now available to use.

    https://www.construct.net/en/make-games/addons/1579/neobutton

  • This is fantastic - might be exactly what I'm looking for. I've a UI-heavy mobile project and got stuck trying to get HTML buttons looking the same on iOS as everywhere else so instead reverted to text & 9-patches.

    Some questions:

    Do you have any project files with examples?

    Does it work with touch?

    Can it handle toggling? I.e. it stays in the pressed state on pressed then back to its normal state if pressed again?

  • There is an example file on the plugin download page which contains the buttons seen in this thread.

    Yes it was designed work with both mouse and touch, though i have not tested it on a touch device so i'm not sure if there are any issues.

    It doesn't have a toggle at this time.

    This plugin was basically a test project for much larger plugin i'm currently developing which is a full blown ui plugin.

  • Sorry - I missed that example file - very helpful.

    Seems to work fine with touch (obviously no hover though).

    Toggling seems easy to solve - I'd just change the button's parameters on click.

    But I'd got my heart set on a new morphism look and don't think I can use your plugin for that as it requires multiple outer shadows and an inner shadow. Also, I'm now making good progress getting HTML/CSS looking more or less identical on iOS and Android.

    But I will keep this in mind for other projects - and good luck with your larger project.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • No problem. Glad you found a solution.

    I've added toggle support since it wasn't much trouble and will update the plugin and example.

    What is this new morphism look? Do you have an image?

  • Thanks for adding toggle support!

    New/neo morphism is based around the concept that elements are "made" of the same material as their background (so typically the same colour) and are either extruded or intruded - and shadows are used to show this effect.

    Here's a sample from Wikipedia:

    https://en.wikipedia.org/wiki/Neumorphism#/media/File:Neumorphism-fixed.jpg

    And here's an online generator - notice that the box-shadow in the generated code has two shadows defined - typically a dark one and a light one.

    https://neumorphism.io/#e0e0e0

  • Its a neat look. Its a bit beyond the ability of this plugin.

    Thanks for the link, its fun to play with to see how i can improve my new plugin.

  • There’s a better online generator here:

    https://creativist.studio/css-neumorphism-generator/

    And their CSS TOOLBOX menu has some other generators you might find inspiring.

Post reply
  • 9 posts
Index icon Return to board index
Jump to:
Active Users
There are 0 visitors browsing this topic (0 users and 0 guests)