Sunday, December 21, 2014

Unreal Engine 4 Tutorial: Smooth Zoom using Mouse Wheel for Top Down Template

Well, I had already written a tutorial for implementing Smooth Zoom functionality for Top Down Template. But it was based on keyboard inputs. Since most Top Down PC games use mouse wheel for zoom, I decided to make a tutorial for the same. The core logic here is the same as the one implemented by Ryan Jon for the custom camera in his RTS Community Project. If anyone's interested, they can get the code for the RTS Community Project here:

UE4 RTS Community Project

Anyways, he has replaced the default camera for the characters with a general camera since that's more ideal for developing an RTS game. Since a basic Top Down game with a single playable character does not need a separate custom camera, I decided to implement the same functionality for the default player camera in UE4's Top Down Template. So let's get down to it.

First of all we need to make a custom curve from the content browser. We will be using this curve to define the smooth camera movement while zooming in or out.
 
         
We want the zooming to start slowly, then pick up the pace and then gradually slow down towards the end. As a result, the curve is also defined in the same way. I've used the following values for defining the curve: (0.0, 0.0), (200.0, 0.8) and (1000, 5.0). Then I adjusted the blue hinges at the key values to get the desired angle. Here's the final result:

                                           
Following that, we move on to the 'MyCharacter' blueprint since our default camera is attached to the player character. First we define two custom events, 'ZoomIn' & 'ZoomOut' as you see here:


We'll be calling these functions when the player uses the mouse wheel scrolling. We then create a tick event and two variables. One float variable 'CamBoomLength' to store the updated the arm length for the camera, and a float curve variable 'ZoomCurve' to store the curve we defined earlier. The default value for 'CamBoomLength' is set to 800.0, which is the default value of target arm length. This ensures that the camera doesn't move around at level start to some random value on it's own. We then use an 'FInterp' node to interpolate from the default target arm length of the Spring Arm to the updated value that we will be storing in 'CamBoomLength'. We connect the delta seconds from the event tick to the interp node and set a value for the interp speed as well. Then we update the return value into the spring arm's target arm length. With that, we have added the functionality ready for updating the zoom amount.

Next, we move on to adding functionality for the custom zoom events that we created in the beginning. So this is where we'll be using the zoom curve. We extract the float value from the zoom curve using the target arm length as the input. We then multiply this float value by 100.0, as we're dealing with arm lengths in the range of 100s. We then clamp these values between the minimum and maximum float values for our zoom. Then based on whether 'ZoomIn' or 'ZoomOut' event is called, we subtract or add this value to the target arm length and store it in our custom float variable 'CamBoomLength'. Now we have implemented the logic for getting values for our our new target arm lengths. All that's remaining is to call these events based on player input. We're going to handle that in our player controller blueprint.

So let's go to our 'MyController' blueprint and add mouse input events for mouse wheel up and mouse wheel down. We then call our character class to access our custom zoom events. Now connect the mouse inputs to these events and we have a working smooth zoom system for the Top Down Template. Here's a screenshot of the player controller blueprint:

 
You can also see the zoom system in action in my project:

 
Alright, that's it for this tutorial. I'll be back next week with another dev update. Until then, feel free to check out my Youtube channel for my new dev videos:

Stormrage256' Youtube Channel


Friday, December 19, 2014

Unreal Engine 4 Dev Update #7: RTS Camera System for Top Down Turn-Based Games

In my previous dev updates, I had talked about how I implemented a grid based movement system in the Top Down template. Now that we got that out of the way, I decided to tackle the issue with the default camera system in the Top Down template. Since I needed the camera to smoothly move to focus on the active character, it was kind of troublesome to use the default cameras as they were each attached to their corresponding characters. So I got rid of them. And now I have a new RTS style camera in place of it. Now this allows me to smoothly move the focus between the cameras depending on the game state. I'll just give a brief overview of the features that I've implemented.

First of all, I created a separate blueprint for the new camera. At the most basic level, it needs to move freely anywhere along the map. So I mapped the WASD keys to move the camera along the forward/backward and lateral directions. I'll probably add mouse based movement as well in the near future. All the features that I had implemented in my previous camera were directly added to this well. This included both keyboard based smooth zooming capabilities as well as keyboard based camera rotation. I had included tutorials for the same in a few of my earlier posts. You can find them here:




Anyways, this time around I decided to add mouse based zoom and rotation as well. As suggested by one of the members in the Unreal Engine community, I have used an interp node to add a mouse wheel based smooth zoom functionality. Alongside, I've mapped the middle mouse button drag to camera rotation. So with the exception of mouse based movement, I now have a camera that can move around the map freely. Here's a video demonstrating it:
                                        
        
As mentioned earlier, one of the problems that I faced with the earlier camera system was the difficulty with having the camera move smoothly towards the active character. So obviously, that was the next thing to tackle before moving on. The functionality for moving towards the newly selected actor was already implemented, but moving forward in that direction didn't serve my purpose well. I also had to take in to account, the fact that the camera needs to focus on the A.I. character as well, when I click on the end turn. So I rewrote the functionality to automatically move the camera between the characters. Again I use the interp node and player/A.I. movement status tests, to have the camera smoothly flow in to focus on the player. You can see it in action in the following video:
         
       
[Note: My PC is not very powerful. The stuttering issues during certain animations are a result of using the screen recording software alongside the editor and not the animation itself]
      
In this video, I've only shown the camera switching towards the active player character and not the A.I. since I was doing some work on the 'End Turn' feature. Now that I've implemented a basic end turn functionality, I'm happy to say that the camera movement smoothly switches it's focus on to the A.I., when it makes an action. So that's it for now. If you're interested in seeing more of my work, feel free to check out my Youtube channel:
        
Stormrage256' Youtube Channel
                              
In a day or two, I'll be uploading a new video with weapons and firing animations for the characters. Here are a few WIP screenshots until then:





Monday, December 15, 2014

Unreal Engine 4 Dev Update #6: Character switching, Holographic Localized grids & Auto-Activation of UI

After I got my basic Command UI & grid based movement system working, I started implementing some changes to the UI as well as the functionality for allowing the player to switch between the playable characters of his party. Lately I've been doing some extra work on Level Design for a game as well as some personal side projects. So I kinda got caught up with all that & wasn't able to post any update over the last weekend. Now that we're back on track, let's move on to the new updates:

Switching between playable characters

Until recently, I had been mainly working on a single playable character, making sure that it's movement was restricted to a grid system. So I decided to implement that across multiple playable characters. For now, I've implemented a keyboard based switching between the party members. Later I'll add a mouse input based selection as well. I got it working by having player inputs mapped to allow possession of the different characters. I've also added a cool little character selection material to display around the active character. It's added to a character whenever we possess it, and gets removed every time we unpossess a character. Here's a video of it in action:

              
Holographic Grid system
                   
Well this one is more of a visual update. As mentioned earlier, I've got a grid system to facilitate the movement of the player and A.I. I'm actually dynamically spawning static meshes to display localized grid meshes. But it actually looked kinda ugly as every time I clicked somewhere, it just spawned a set of floor meshes. So taking inspiration from the awesome X-Com: Enemy Unknown, I decided to make some cool holographic styled grids. It's using the same meshes as before, I just switched the material to display a glow around it's corners. It looks a lot cooler now. Kinda gives the feel that you're actually the commander watching his troops deploy on the battlefield. You can check it out in this video:
          
      
If you want to create a similar holographic material, you can check out the video tutorial below by the Youtube user Liaret. He's made an awesome Tron glow material, that can be applied to meshes & BSPs.
    
Tron Glow tutorial - Unreal 4
         
Auto-activation of Command UI & Holographic Grids
   
After the above two updates, the next obvious thing to do was to combine them. I extended the possess character function to toggle the Command UI as well as the grids in the vicinity of the newly possessed character. So now they're activated automatically, every time the player switches between the playable characters. I'll leave you with a video of it here:
   
  
With that, we come to the end of this update. In the next update, we make some changes to the camera system and start with a basic Turn-Based gameplay system. Meanwhile, feel free to check out my Youtube channel, if you're interested in seeing some of my recent work on UE4:
     
Stormrage256' Youtube Channel

Sunday, December 7, 2014

Unreal Engine 4 Dev Update #5: HUD based Command UI, Grid based movement system & Dynamically Spawning Grids

Welcome back to the blog, it's time for another update. Starting with this post, I'll be posting only the details regarding the new development in the dev updates. I'll post tutorials for some of them as separate posts. I'm doing this since I don't have time to write the tutorials for each and every one of my updates. So I'll be making tutorials only for those topics which aren't available elsewhere. With that out of the way, let's get to this week's dev update. I'm already behind schedule by a few posts.

In my last update, I had written about how to implement keyboard input based camera rotation for Top Down games. You can find it here:

Unreal Engine 4 Dev Update #4: Camera Rotation for Top Down Games

Moving on to the updates, these are the main changes that I have made:
                       
HUD based Command UI
                                    
Following my last update, I worked on implementing a basic HUD based Command UI. Since I hadn't worked on HUD Blueprints before, I looked into the HUD based Blueprint examples available in the UE4 Marketplace. After tinkering around with Blueprints, I came up with a basic Command UI. Since I'm trying to work towards a Turn-Based shooter, I added two buttons that serve the basic purposes - Movement and Firing. The 'Move' button basically ask the player character to move to the location under mouse click, while the 'Fire' button fires a projectile in the direction of the mouse click. It's pretty basic stuff, you can see it in action in this video:
                                                                                                                    
    
Grid based movement system
   
Next up, I implemented a Grid based movement system. Initially my plan was to manually add box meshes around the level and then concentrate on the player movement separately. But since it was too much redundant work, I decided to spawn the meshes dynamically at level start. Well, not strictly dynamic since I hard coded the boundary of the playable area. Using the boundary data, I created an array by dividing the total game space grid by 100. For each of these 100x100 grids in game space, an element was added to the array. In order to store both X and Y coordinate data in the array, I used two 'For loops' while making the calculations. The vector data thus obtained was added to the array at level start, thus giving me a list of locations that the player can move to. As a temporary measure, simple box meshes are spawned along the grid at level start to depict the grid system. The data from the grid array is used every time the player character is issued a move command. Based on the click location and the array data, I was thus able to restrict the player movement to the grids. Here is a short video demonstrating the system:
                                                                                                 

Dynamically Spawning Localized Grids
                                    
After the UE4 update from v4.4 to v4.5, my level got a massive frame rate hit. With nearly 1600 grid meshes at level start, my system couldn't even run it at 10 fps. Hitting up the forums and UE4 Answer Hub didn't get me a satisfactory solution. As a result, I decided to move on to localized grids instead of an all-encompassing grid system. Instead of spawning the grids at level start, I switched to dynamically spawning localized grids based on player's mouse input. This helped reduce the number of grid meshes from 1600 meshes to just 9 meshes, and thus helped bring the frame rate back to speed. It also helped in keeping the game space clean. Now every time the player clicks on the floor, grids are spawned in the region corresponding to and surrounding the mouse click location. I'll leave you with a video for the same in action: 
  

Alright that's it for this update. If you're interested in seeing more of my work, feel free to check out my Youtube channel, as I generally upload my work over there before the weekly blog update.