DEV Community: Angela Rodriguez

Dipping into Unreal Engine After Learning Unity - Part 1

Angela Rodriguez — Tue, 13 Aug 2024 01:58:43 +0000

I've recently decided to start my journey learning Unreal Engine in order to focus on making more 3D game-development projects. With previous projects largely focused on 2D games, I thought it would be best to share my thoughts of switching and learning about creating 3D worlds. As a disclaimer, I am without a doubt a beginner while learning this engine, so this serves less as a guide and more as a trial and error blog post. Now that we have that out of the way, let's start creating!

Starting With the 3rd-Person Perspective Base Level
Becoming Familiar with Unreal Engine's Material Creation System
Adding Player Features & Physics
Animations + Final Thoughts

Starting With the 3rd-Person Perspective Base Level

Unreal Engine allows for its users to begin with a base world to start out. With this map, they already add a moveable character and 3rd-person camera perspective to move throughout the map. I thought this was pretty helpful so that I could examine the Blueprint interface and see how they handle movement for both the playable character and camera.

In order to test out how to change the meshes and textures of different materials, I went to the Details panel and changed the Element Material Instance and likewise altered the colors of the grid lines and cubes through Unreal Engine's Blueprint Material Instance Graph. This was the part of the project where I was playing around with the engine more, but that's the fun of customization. I even went to Unreal Engine's store to add a tree and liven the map!

Becoming Familiar with Unreal Engine's Material Creation System

Now to get to the more complex parts. I thought it would be nice to start out with learning how to create materials and landscapes in the engine before beginning to program a base game level. That way later on, I could create a game of two levels where after succeeding in the first level, you get to traverse into the next one.

To start, I migrated to Unreal's Quixel Bridge that offers many free 3D models and surface materials that make landscape creation much easier. Using this, I started messing with the material mesh UI to create different surfaces for when the landscape becomes rocky, sandy, or grassy.

The sculpting and painting of surfaces using Unreal Engine was surprisingly very similar to Unity's handling of 3D landscapes as well. What was new to me was creating landscape instance functions and adding in material instances to make the blending of the surfaces more clean when sculpting your landscapes.

After messing with the Landscape Mode, I added a body of water through Unreal's Water plugins, made some more edits to the shape of the map, and sculpted the landscape some more.

Plus, I added trees because... why not?

So now we have a landmass with a body of water, a forest, plants, and some rocks and we need to have some level of action that occurs here.

Adding Player Features & Physics

There's this asset in the Unreal Engine store and it seems we could make an interesting mini-game where you listen to a golem in a post-apocalyptic world, enter these spaces while searching for an item, and return it back to the golem, allowing it to remember parts of its past.

Since this is my first time working with character animations in 3D, I downloaded from the large assortment of meshes in Sketchfab and found a great skin to use for this project. While the skin I downloaded already carried a rig, I wanted to try out the AccuRIG system so it would be smoother to download character animations from their system later on.

Afterwards, we have to add our character mesh into Unreal Engine and make sure to replace the default mesh into our newly rigged character. However, you can notice that when the new character is added, the player will not be walking and actually be moving in a T-pose. We need to make a few more adjustments in order to actually have it move within our environment.

Animations + Final Thoughts

To add the animations, I installed a few from the Mixamo store that takes your rigged character and allows you to pick from their library of animations. I picked a few that focused on idle, walking, running, and jumping animations and then created an animation controller. This allowed for the smoothness between the movement of the animations which focused on speed and checking if the character is falling or otherwise.

And here is the result as of now!:

For now, I will end the blog post here to not make this too long. What I've seen is just how powerful and versatile Unreal Engine is for making realistic games and makes it that much more accessible to both beginners and experts alike. This short mini-exploration of the engine was fun and I plan to spend more time on learning more game mechanics to add to the project so that I can learn more on what this engine has to offer. Thanks for reading and see you on the next part!

Creating a Multi-Level Visual Novel in Unity: Rat in the Trap - Dialogue System

Angela Rodriguez — Wed, 08 Nov 2023 01:20:24 +0000

After several weeks of development and several more weeks of bug fixes, my 2D survival-horror visual novel is fully completed! As a multi-part overview blog of the sections that I completed for my game, I will be reviewing each essential aspect that was both challenging and rewarding to learn in the Unity Engine.

Organizing Story Scenes
Building the Different Story Scenes Together
Challenges Faced
Conclusion

Organizing Story Scenes

In the creation of this dialogue system, since I had originally created such a system previously in my first game jam project, Remnants of Us, I implemented a similar format.

In this project, both my previous game and this project, I referenced AD works immensely helpful visual novel tutorial in order to construct the base of my dialogue system.

First, we must clearly define the different objects for which the text is going to be displayed. These include the text, which will display our lines letter by letter, and the names of the characters who will be speaking.

Building the Different Story Scenes Together

One thing I found helpful and informative to learn in regards to the setup was the creation of an Asset Menu and Scriptable Object. This allowed for the manipulation of different variables within the code, including the different lines that each character will speak and the name of the character that is speaking. Originally, I believed that the collection of multiple different story line data together would be messy, but this assembles the different lines efficiently and makes each scene appear at perfect timing.

Challenges Faced

Some challenges that occurred throughout the project were having the animations for each character occur within certain lines and moments within each scene. In order to account for this, there needed to be a new data structure added to the scene menu that would dictate the scene name. Additionally, in code, you would need to check the sentence index and when it would occur within the game.

Conclusion

Overall, this setup provided an excellent framework that would aid in the later mechanics I developed for the project. For instance, in the next part, I will discuss how I implemented the choice options that occur within the game. Thanks for reading!

Making Your Unity Game Playable Without Download: The WebGL Way

Angela Rodriguez — Fri, 01 Sep 2023 22:09:12 +0000

After making my first game, the only thing I focused on was publishing it on itch.io and calling it a day. However, one barrier that I didn't acknowledge at the time was the sluggish nature of some gamers. Let me explain.

When heading to the itch.io page, not many people want to go ahead and download an actual game. It has become a sort of unmentioned bad impression on playtesters if your game is not HTML5 compatible.

Well today, before publishing to itch.io, I came across an issue building my WebGL project and thought to review some of the common problems that occur when publishing your WebGL build.

The Difference Between WebGL Build vs. Windows Build
Unity's Build Settings
Web Browser Features
Further Resources & Settings

The Difference Between WebGL Build vs. Windows Build

From my knowledge, the WebGL platform is the way for your game to be cross-platform and playable without needing to go the extra mile of downloading the game. The game is embedded within the web browser, so you can play your game right on your web server! There are many hurdles of figuring out if your game is formatted the correct way during game development, and WebGL is a platform to render your game the same way across all platforms.

In more professional terms, WebGL is a JavaScript API used to render any 3D or 2D game without download right on your web browser. The JavaScript code and shader code is oftentimes pre-written within the engine you use. In my case, I will be focusing more on how Unity WebGL works and some small fixes that I made which makes it easier for you to test your own WebGL build.

Unity's Build Settings

Texture Compression: the range of techniques for reducing the memory output of your textures by removing excess and removable data.

If you head to File > Build Settings > Player Settings, you will find the field of settings that mainly handles texture compression format for your WebGL build. Should you come across an error I found when running my game, this section will be very helpful.

Texture compression in WebGL is the way to create builds for several platforms while keeping the texture compression that the devices can support in mind. Since each desktop and mobile device will have different texture compression formats, there can be a conflict. However, we want to use compressed textures on all platforms, so we need to support each device's supported texture compression format. Therefore, to run on all devices and their compressed textures, we must target a Compression Format which is most appropriate.

Compression Format: Determines how Unity compresses files during the build step.

Unity by default sets their Compression Format to "gzip." This is due to Gzip files being faster to build and natively supported by all browsers over HTTP and HTTPS. However, Gzip files are comparatively bigger than Brotli files, which is the next Compression method you can use.

Brotli compression offers the best compression ratios and smaller compressed files compared to its alternative gzip. However, the build times are often longer to compress, which increases wait times when releasing your final build.

Lastly, you can choose neither. Having Disabled compression is targeted for developers who are building their own compression through scripts. This option is not recommended if you are not using static compression on your server and typically is the cause for errors and long waiting times for build downloads.

Texture compression is necessary due to the limited amount of space, memory, and time that each of our devices have. Since textures take such large binary files that impact game performance, we want to limit this as much as possible and this is where compression comes in.

Decompression Fallback: Determines how Unity processes downloaded files when the build runs in the browser.

This option in Player Settings > Publishing Settings enables Unity to automatically embed your JavaScript decompressor into the build. The decompressor coincides with the compression method that you decide from before. Otherwise, the decompressor decompresses the content automatically if the browser doesn't.

If enabled, Unity adds the .unityweb extension to your build files. This is helpful if you don't know much about server configuration or if it is unavailable. Despite this, enabling this feature causes a larger loader size and is less efficient.

This is why Unity typically leaves this feature disabled by default. Due to this, your build files will include an extension corresponding to your compression method.

Web Browser Features

Sometimes when playing your game on your web browser, frame rates can be incomparably slow to your Game View playthrough. One reason can of course be due to any game feature you have taking a long time to process. Any issue related to game features can be viewed from your Profiler window within Unity.

However, another fix can be going to your web browser's settings. If you go to your system settings, you may find a feature called "Use hardware acceleration when available." This feature allows any application to have hardware performing tasks more efficiently than exclusively through your CPU. This exchanges your tasks that are handled in your CPU to other areas such as GPUs, DSPs, and sound cards.

From this feature, game performance becomes more smooth. However, if slow performance, freezing, or crashing persists, you should keep it disabled.

That is essentially the main features to look for when building games in Unity. It can be daunting, but I hope this helps in some way for Unity developers building a WebGL game. Thanks for reading!

Further Resources & References

Unity WebGL Documentation
Texture Compression in WebGL
An Introduction to Texture Compression in Unity
Hardware Acceleration
Some further configuration you can implement is within your own web browser. In order for browsers to decompress any Unity build file when downloading, you must alter your web server to serve the compressed files within the targeted HTTP headers. In other words, this process is called native browser decompression. Since it is faster than any JavaScript decompression fallback, this is oftentimes a more effective way of reducing your application's startup time. Since the process is very complex, I will leave the link here for further reading.

Developing My First Portfolio Website: From Wix to Github Pages

Angela Rodriguez — Sat, 26 Aug 2023 00:25:28 +0000

In middle school, before deciding I wanted to learn programming, the furthest I had explored on web development was (wait for it) Wix. The only reason why I knew of how to make a basic website without stack tools was because my 8th grade science teacher asked for one for my final project before winter break. When adding each image, each text, and embedded each link, I truly thought I was a genius for taking up "web development" so quickly.

Flash forward to today, as I am making the attempt to traverse further into webdev, I was immediately intimidated by each complexity of the features that I so easily placed on Wix beforehand. After almost attempting the journey that is learning CSS and Javascript for creating a portfolio website, I was advised to give Github Pages a try. After spending weeks previously creating an appealing README file on Github, I wanted to go ahead and give it a go.

PART 1: Picking a Template
PART 2: Adding Edits to the Code
PART 3: Uploading to Github Pages
PART 4: Connecting a Personal Domain to Website

PART 1: Picking a Template

There are several great website templates that you can choose from - I chose from HTML5 Up! It appeared to be a great bridge between visuals, usability, and an educational introduction to the HTML, CSS, and JavaScript languages.

Depending on the website template that you use, the starting process could be different. For me, I downloaded the zipped file from the template "Dopetrope." I highly recommend looking through all of their templates as they are affordable and understandable.

PART 2: Adding Edits to the Code

Here is where things got interesting. I saw a big blob of code and began reviewing it. Hear me out-something I never thought I would be excited by is altering some HTML and CSS code and figuring out how each style document in CSS supplemented the a live site.

There were several items I specifically wanted to get done and it was first to make this website have the same theme as my previous Wix portfolio page.

Believe it or not, the banner was the hardest part of the project, but I think it ended up looking nice with the site. Afterwards, many edits was focused on adding blog and about me pages, changing the colors in the CSS doc, and figuring out what to put for the favicon of the portfolio (one of the highlights of my time creating the site). One tip I recommend: remove the .html part of the href when referring to a page on your site. It took me a while to figure out it stays on your extension haha.

PART 3: Uploading to Github Pages

Now that the trickiest part is over, we can go ahead and upload to Github. When naming your repo, you must use username.github.io or reponame.github.io in order for github to create the website. Next is uploading the files.

The way I chose is through your terminal by connecting to the remote repository and pushing to your main branch. The alternative is by uploading them straight into your repo. If you choose this route, make sure to have all your html files in the root directory. This removes any issues of Github attempting to read your files and hosting the website.

For many people, this is the last step of the process. If you got this far, WHOOHOO! You officially have a website! For perfectionists like me, you want to officially name your website without the github.io extension at the end.

PART 4: Connecting a Personal Domain to Website

Depending on what you want out of your site, you can have a .com, .net, or even .dev which each have their own respective costs of approximately $10 annually. Since I only wish to use this site for my portfolio work, a .me really personalizes the site. I used NameCheap for purchasing the domain, so they carried their own tutorial for connecting your domain to Github which I will link here.

Afterwards, go into your repo's settings and click on the Pages subheader. You can then add your domain into the custom domain subsection and wait for the DNS check and certification process to complete (approximately 30-60 min). Then after that you can finally enforce HTTPS and have your fully personalized website created!

Congratulations for making it this far! I was thinking of completing this project for the past two months, but finally got around it.

There are still some updates I wish to make on the site including APIs for Github projects that automatically update with the site along with a DEV.to API for blogs. However, for now I am satisfied with my progress and will leave that for a later blog post.

Thanks for reading this far and make sure to look at the finished website I created here: https://www.angelarodriguezz.me/

DEV Community: Angela Rodriguez

Dipping into Unreal Engine After Learning Unity - Part 1

Table of Contents

Starting With the 3rd-Person Perspective Base Level

Becoming Familiar with Unreal Engine's Material Creation System

Adding Player Features & Physics

Animations + Final Thoughts

Creating a Multi-Level Visual Novel in Unity: Rat in the Trap - Dialogue System

Table of Contents

Organizing Story Scenes

Building the Different Story Scenes Together

Challenges Faced

Conclusion

Making Your Unity Game Playable Without Download: The WebGL Way

Table of Contents

The Difference Between WebGL Build vs. Windows Build

Unity's Build Settings

Web Browser Features

Further Resources & References

Developing My First Portfolio Website: From Wix to Github Pages

Table of Contents

PART 1: Picking a Template

PART 2: Adding Edits to the Code

PART 3: Uploading to Github Pages

PART 4: Connecting a Personal Domain to Website