Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

How to Create Flickering Neon Effects
Started by DevilSquid – René Mar 01 2016 08:34 AM

14 replies to this topic
neon effect bézier
[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

DevilSquid – René

[GLOBAL: userInfoPane.html]
DevilSquid – René
  • Contributor

  • 157 posts
  • Corona SDK

Hello Corona Developers,

 

I just release a new module: the Neon Shapes module.

Neon-Poster.jpg

 

You can create any basic geometry shapes with a neon style effect.

Furthemore I added a neon text object based on a special bitmap font I created.

Last but not least I created a neon Bézier curve object to create any rounded shape you like.

 

And to create the whole lot of coordinate points needed for a complex Bézier shape I added a little Bézier curve editor.

 

Here is a short intro video:

https://youtu.be/tBsK-WjpVFA

 

I wrote a tutorial article on how to use the module. I also explain how the neon shapes are built (for the technical interested ones or if you want to rebuild a similar system). And the whole thing is for free (well, for a like).

 

Here is the link to the article:

http://devilsquid.com/create-flickering-neon-effects-corona-sdk/

 

Enjoy

- René



[TOPIC: post.html]
#2

bjsorrentino

[GLOBAL: userInfoPane.html]
bjsorrentino
  • Veteran

  • 8,506 posts
  • Corona SDK

Hi René,

Great work and very comprehensive!

 

Would you consider bundling this up as Lua-based plugin? If you would, we could offer it within the Corona plugin marketplace and make it more accessible to developers.

 

Best regards,

Brent



[TOPIC: post.html]
#3

QuizMaster

[GLOBAL: userInfoPane.html]
QuizMaster
  • Contributor

  • 235 posts
  • Corona SDK

René, you are so awesome to share this. I've given your youtube video a thumbs up and a comment.

 

I'm going to go to your website and download your module.

 

Thanks very much.



[TOPIC: post.html]
#4

DevilSquid – René

[GLOBAL: userInfoPane.html]
DevilSquid – René
  • Contributor

  • 157 posts
  • Corona SDK

Cool, thank you so much.

Let me know if something is not working out for you.



[TOPIC: post.html]
#5

DevilSquid – René

[GLOBAL: userInfoPane.html]
DevilSquid – René
  • Contributor

  • 157 posts
  • Corona SDK

Hi René,

Great work and very comprehensive!

 

Would you consider bundling this up as Lua-based plugin? If you would, we could offer it within the Corona plugin marketplace and make it more accessible to developers.

 

Best regards,

Brent

Good idea. I will have a look at Rob's tutorial to create pure Lua plugins.



[TOPIC: post.html]
#6

farjadfarabi_czs

[GLOBAL: userInfoPane.html]
farjadfarabi_czs
  • Enthusiast

  • 97 posts
  • Corona SDK

[TOPIC: post.html]
#7

farjadfarabi_czs

[GLOBAL: userInfoPane.html]
farjadfarabi_czs
  • Enthusiast

  • 97 posts
  • Corona SDK

Hi there,

 

I gave this awesome module a go.

 

However, it seems that the Neon:text option is not working on device? Works perfect on simulator. 

 

I tested on a Nexus 7 running 5.1.1 and the text is corrupted. It only shows a letter p, but the letter p is not even in my original text. 

stageT=Neon:text({
parent=textGroup,
  text="STAGE 6", 
  fontSize=100, 
  x=x,
  y=90, 
  glowColor={56/255,203/255,166/255}, 
  fillColor={0.2,0.3,0.2},
  flickerEffect=false,flickerStyle=5
})

Anything I'm doing wrong? Please help. 



[TOPIC: post.html]
#8

DevilSquid – René

[GLOBAL: userInfoPane.html]
DevilSquid – René
  • Contributor

  • 157 posts
  • Corona SDK

@farjadfarabi_czs

 

I'm sorry, it doesn't work. I will check this out today and will get back to you.



[TOPIC: post.html]
#9

DevilSquid – René

[GLOBAL: userInfoPane.html]
DevilSquid – René
  • Contributor

  • 157 posts
  • Corona SDK

Just in case someone else ran into the same problem as fajadfarabi_czs:

I sent farjadfarabi_czs a new version which uses texture memory more efficiently.

farjadfarabi_czs tested this new version and it works now.

Thank you farjadfarabi_czs.

 

The used texture memory whenusing neon text is quite high: it loads two bitmap fonts at the same time. And the bitmap font fpr the glow effect is quite big because the glow needs much space in the texture. This lead to problems on older devices.

 

I will send out a new version, when I updated the fonts properly.



[TOPIC: post.html]
#10

QuizMaster

[GLOBAL: userInfoPane.html]
QuizMaster
  • Contributor

  • 235 posts
  • Corona SDK

Keep up the good work René



[TOPIC: post.html]
#11

farjadfarabi_czs

[GLOBAL: userInfoPane.html]
farjadfarabi_czs
  • Enthusiast

  • 97 posts
  • Corona SDK

Thanks to Rene for his amazing work. :D 



[TOPIC: post.html]
#12

DevilSquid – René

[GLOBAL: userInfoPane.html]
DevilSquid – René
  • Contributor

  • 157 posts
  • Corona SDK

Thank you all. 

I just updated the neon module.

Now you can choose between two different neon text font.

 

NeonText-Clean-Distorted.png

 

Use

font="NeonFontClean"

or 

font="NeonFontDistorted"

NeonFontClean is the default value.

Just re-download from the link you received.

 

Best

René



[TOPIC: post.html]
#13

jbonitohamza

[GLOBAL: userInfoPane.html]
jbonitohamza
  • Observer

  • 1 posts
  • Corona SDK

Hi, really good work Rene. I enjoyed a lot.

However, I think there is something wrong with text. I was trying to use neon text in a scene, but it is coming all my scene.

 

    local infoTxt = Neon:text({
    text="NEON",
    fontSize=40,
    x=200,
    y=200,
    })
    sceneGroup:insert(infoTxt)

 

Best,

Hamza



[TOPIC: post.html]
#14

DevilSquid – René

[GLOBAL: userInfoPane.html]
DevilSquid – René
  • Contributor

  • 157 posts
  • Corona SDK

Hi Hamza,

 

hm, sounds like I do not insert the neon text objects into the display group.

I will check this and get back to you.

 

Best

René



[TOPIC: post.html]
#15

DevilSquid – René

[GLOBAL: userInfoPane.html]
DevilSquid – René
  • Contributor

  • 157 posts
  • Corona SDK

@Hamza,

 

ok, I missed it like stated above.

 

I updated the files. Please just redownload.

Hope it works now. Thank you for pointing this out.

 

Best

René




[topic_controls]
[/topic_controls]