Exploring Real Time VFX in Unreal, Unity, and p5.js

In preparation for my summer internship I am diving into game VFX!

For ACCAD 5012, Intro to Programming for Artists and Designers, I decided to try to incorporate particle simulation since we are moving into Object Oriented Programming. I followed a tutorial on the coding train to get a basic setup for particles. This setup doesn’t use acceleration, wind, etc. So, I was able to just try to figure out some of the basics of a particle system using Javascript.

Using object oriented programming the fire is created with an array that gets filled with a for loop.

Here are links to the web editors to view the commented code:
Hot Fire

Fire Spirit

Some Bomb

For that last effect with a pink background instead of using the provided textures I hand painted each of these textures as part of the tutorial. I found texture painting much easier than some of the other new concepts in the blocking-in section. But I found I learned more than I thought when working on this ‘anime flare’ because the tutorial was for Unity but I was able to figure out most of the steps in Unreal 5. Below are my hand painted textures that make up the flare. I didn’t use any straightening tools or mirroring to help maintain the hand painted feed but I think some of my lines almost seem too symmetrical. Maybe more variance next time.

Pick up glow effect

Pick up glow from the VFX Apprentice Block-in tutorial that has expanding rings similar to my reference.

Hand Painted Texture

Mya’s Adventure Box Summon VFX

For my final for ACCAD 6002 Game Design II I made sure to carve out time for some sort of VFX. This was a challenge because we were tasked with creating multiple games throughout the year. The games weren’t entirely from scratch as we had a library of some abilities that we could utilized. My final game ended up having abilities that I had to figure out how to implement myself which is always slow for me as I am far more of an artist than an engineer. But I was able to successfully carve out time for at least a first pass on a box summoning effect.

Below is a screen cap from the functional game I delivered for the final. Mya uses her magic box creation spell to make platforms for herself to traverse the level. The pink contrasts fairly well in the scene. Despite a few bugs players gave positive feedback for the sandbox and jumping. They also really liked the look of the effect. I think there is quite a bit of room for improvement.

I asked in the VFX Apprentice feedback section for a critique and got some great insight into how I can tackle this effect again. This feedback via Sonia:

oooo cute indeed! C:

Love the colors and details in it! And I have a few ideas on how to push this effect a bit further:

- You can try add more variation on the very first spark that goes inside. Like, some might be shorter, less symmetrical placement etc. It might be a stylistic choice for this very square like placement though, so if it is, just ignore me here

- For the color contrast, you can add semi-transparent dark glow on the back in the impact moments. Will be better to work with it on the gameplay background to see how far you can push the darks to make the highlights pop-out more.

- Timing and spacing can be pushed too! You have a moment where the bright orb goes bigger and then right after it the darker blob goes bigger into the smoke. And the size of bright blob and dark blob are quite the same in the moment they get noticed, which gives a bit of a stutter feeling. You can give the size change for the dark smoke to be more rapid, as in ease out, without the slow grow at the start! It will make it's appearance to be more clear and accented on the final size and will help to differentiate it from the bright blob

- The sparks and the smoke disappear quite at the same time, which makes it a bit harder than it could be to process them! I would suggest making sparks to be there a bit longer, so you can still see them when the smoke is gone! Hope it helps! I love this effect, can't wait to see your next iteration!

The main inspiration for the effect came from the talented 8-bit artist Luis Zuno. His ice Magic Spells Pack Demo had some amazing reference for how to shade and animate. My own effect came out looking very different but this reference was really helpful.

Concept Art Practice

While my internship this summer will focus on Realtime 3D vfx in Unreal 5 I’m still just trying to learn a bit of everything. Here are some concept art for different VFX I have done as practice or for inspiration.

Magical Energy Ground Effect

My internship is starting right around the corner I realized I hadn’t actually made any cool explosions or spell effects yet. I’ve been working through a significant portion of tutorials at VFX apprentice but there is a large jump from the block-in tutorials to level 2 where there is a giant scene with example effects you can work from and adapt. I wanted to find at least one tutorial that walked me through a cool effect with each step but I also only had a few days left before my start date.

I searched youtube for other tutorials and found there were not many that appealed to me visually or were specific to Unreal 5. While I plan to watch many more tutorials for Unity or Unreal 4 in the future, I wanted to focus on the relevant ones prior to my start date. I found this tutorial and was really excited but instead of a step by step it was a walk through.

I decided instead of searching more I was just going to see if I could piece together what I have learned so far and see if I could get a spell on my own that was sort of close to this effect. I started with ground circle. I realized in the block in I had been introduced to a similar way to initialize a particle with duplicates that are slightly offset and all scale up with a eased out curve. I started painting a texture that looked sort of similar. A circular ring that could match the glowing ring animation from the pick up spell block-in effect that I had previously learned.

Starting out with a ring texture. I looked at the pickup and the heal to review how to rotate the circles

Hand Painted Texture

Starting out with a ring texture

I went back to the breakdown tutorial and started the setup for the Hue shift widget. I’d never created a widget before in Unreal so I searched the documentation. I followed the documentation (Creating and Displaying UI Unreal 4.27) all the way through but it created a setup that only worked for on Key hit Enter. So, I had to watch another tutorial to get the Event BeginPlay node.

Now the widget does work though and I can change the color in play mode which is a neat thing to note. I had to solve a few error messages from missing inputs, as well, so that definitely helped me feel more confident troubleshooting small errors.

I continued working through the first half of the tutorial and will continue. I also experimented a bit with different pieces that I can add to the energy and adjusting the timing and seeing where the effect might go. I’m going to stop here and do a concept art for the main effect because I like the impact but I want to have a more clear picture in my head of what sort of spell or magic initiates the impact. I definitely want something Sailor Moon / Star Guardian style but I need to plan things out a bit more before building.

Some tutorials I might incorporate:

https://www.youtube.com/watch?v=OdSG8Z9HnW0&ab_channel=CGHOW

https://www.youtube.com/watch?v=FUu2WNcJbtE&ab_channel=VFXApprentice

ACCAD 5012 final

For my final project for ACCAD 5012, Introduction to programming for artists and designers, I combined several pervious projects and created a vibrating energy ball that could be edited with sliders. There are many variations as a result of the blend modes, scale, and color settings.

You can view the code and experiment with different settings here: Energy Ball Final

VFX Apprentice Tutorials

Following tutorials from VFX Apprentice here are a few snapshots of progress through level 1. While I only made minor adjustments to the tutorials I am posting to track progress and keep as visual reference for when I come back to these tutorials in the future.

Previous
Previous

Holograms & Interactivity

Next
Next

Sexism and Objectification in Video Games Research