Skills and Employability
Learning how to get a job in the industry.
Pre Construct instead of Construct!
Before today, I used the Construct node to set each component's settings with user-changed variables, but then I found out about the Pre Construct node (somehow I hadn't found it earlier) and had a brainwave. The normal Construct node executes at runtime of the game, like it should, however the Pre Construct node executes at runtime AND in the editor, so I can see the values I'm changing affect the widget in the editor instead of having to launch the game every time.
Construct:
Notice how the text in the button doesn't change.
Pre Construct:
Notice how the text in the button does now change.
Portfolio Plan
My portfolio will include my best work first, so that employers can immediately see what I'm capable of, and also to show, not tell. By using videos and images instead of blocks of text, I can quickly show ore information to the employer and take up less of their time, which in turn makes them look into my portfolio more.
​
I would also include an "About Me" section, to give myself the opportunity to explain why I'm suitable for the job role, and also to give more clarity on some areas that might be a bit clouded. It also lets the employer get a sense of me as a person and how I might act in a team.
Ways to improve my time management and target setting skills
Creating a timetable:
This will greatly benefit me because not only will it outline what I need to do and what times I will do these things in, but it will also help to get me into the mindset for work, as it makes me think I’m at school where timetables are used for lessons. In addition to this, it also lets me see which areas of work I’m lacking in and allows me to allocate more time towards those areas compared to other areas.
​
Getting into a routine:
By being in a routine, I can make my body get ready for anything by doing it enough times. For example, going to college. On college days, my body knows I’m going to college, so it wakes up easier and stops me feeling as tired in the morning. If I apply this to time management and can get my body ready for work, then the times when I do work will be more efficient and optimised, allowing me to get more work done and less procrastination.
​
I can improve my target setting skills by continually updating my targets and timetables based on what work needs to be done, so it’s not only allowing me to practice how well I can plan days out, but also lets me reorder these days into times which are more practical for the tasks that need to be completed.
Year 2 Target
My target for this year is to create a polished, full-featured, and functioning user interface that shows off my skills in the matter. Throughout the year I will be experimenting with different styles, tricks, and ways of doing different things optimally whilst learning in the process.
​
Example of working towards this target:
I've spent a while making different kinds of UIs in UE4 now, and I did them all in one project for organisational purposes, and here's the result so far. I recently started to experiment more with materials and UE4 to be used in UIs (for rounded corners on images, shadows, etc.).
This is the result of that, with the shadow fading in and out when you hover on and off it. I plan on adding options to the shadow object, like strength, size, blur amount, etc., but currently it's just limited to changing the opacity (which is similar to strength but not really).
Progress Towards My Year 2 Target
I’ve made progress towards a more modular and user-editable interface design, in which I use the UMG animations as Timelines to lerp component values when different states occur (e.g. hover, pressed, etc.). This means I can set those values as public variables for the user to change whenever they want to customise their experience (like changing the colour to make it more to their tastes, enhancing the individuality of each user’s game).
An example of using the animations in this way is this:
We play the animation (and change its playback mode depending on if we’re hovering on the button or not), and set its start time depending on the playback, finding the reverse time by doing some maths with the end time and current time through a select. There is a repeater used in the animation which is what that custom event links to, so whenever the repeater is played, it executes the nodes coming off it. The current time is also set here, and we set the values we want to lerp here also. I’ve used two kinds of lerps, a normal float lerp, and a linear color structure lerp for the colours. By using the right lerp node I can make sure less time is lost breaking the struct pins.
This is the animation timeline, it’s 1 second so that the lerps can go completely from A to B (A = 0, B = 1). This also means it’s easy to understand how fast you want to speed it up with the Playback Speed part on the Play Animation node. I made this a variable so I can change it for each animation whenever I need.
This is the Event Graph. It only has the Pre Construct events in it as the other events are needed. These just set the values ready for the game start, but also sets them in the editor (thanks to Pre Construct instead of Construct).
This is my Text Alignment function, which has two Alignment Enumerators which function off each other to let the user pick any corner or side anchor and it sets the correct alignment also, making it very fast and easy to set them (the alternative would be just to show the numbers, but users most likely won’t know what those numbers mean).
Continued Progress
I watched a tutorial on making settings for changing resolution, fullscreen mode, quality, etc., and successfully implemented it in my own project with my own UI widgets like so:
I added horizontal lines to the settings screen also to make it look more appealing and this is the result:
Tab Transitions (Continued Progress)
I was experimenting with tab transitions for a while, and couldn’t figure out a solution to having the contents of each tab move left or right depending on the last selected tab and the currently selected tab, so I instead opted for a simpler “zoom” transition, where the contents would zoom in (really big to normal size) when that content’s respective tab is clicked, and zoom out (normal size to really small) when another tab is clicked, and it has a really cool effect.
I use tabs within tabs in this project, and so didn’t want to confuse users with the same transition when they use the sub-tabs, and so created a difference transition, which is similar to the zoom, however it’s only on the X axis, so it’s a stretch instead.
Tab Transitions using a Scroll Box
After trying to make tab transitions going left and right and failing, I realised I could use a scroll box to do the work for me. This lets me make a function that I put into the Tab Pressed events and change some integers and voila!, a working transition system. Of course it's not actually a transition system, it's just scrolling between different widgets, but it works almost flawlessly (the small flaw being the far left and far right tab contents widgets, in which they do not centre properly, and I tried using spacers to solve this but to no avail).
Inside the scroll box I have a Size Box for each of the contents widgets so I can scale them to the size of the viewport. I have tried to do this in Blueprints so that it can dynamically change depending on the viewport size, however this hasn't worked.
This is the function that both changes the tab contents (scrolls to the right tab) and deselects that last selected tab. It first ends the inertial scrolling of the scroll box. This is so that there isn't any over scroll or deceleration after clicking a tab. The Sequence executes from 0 upwards, so the Switch on Selected Tab goes first, which sets the Widget To Find variable to the contents tabs of their respective numbers (which is used in Then 2 of the Sequence). Next is the Switch on Last Selected Tab, which deselects the tab that it's equal to if Last Selected Tab and Selected Tab do not equal each other (i.e. clicking another tab means that Last Selected Tab hasn't changed to equal Selected Tab yet, making them not the same, so it deselects that last selected tab with the Switch). Lastly, the Scroll Widget Into View is used to scroll the contents widget to the centre of the screen (the contents widget being the Widget To Find variable that was set in the Then 0 of the Sequence).
This is calling the function and setting the Selected Tab variables for each tab click. I set the Last Selected Tab variable after the function because if it was done before, then Last Selected Tab would be equal to Selected Tab, which won't deselect the Last Selected Tab. It may be more optimal to use one instance of the function and one Set on Last Selected Tab instead of four, but using four makes it more understandable, and the performance increase wouldn't be worthwhile the potential hassle it may cause.
The far left and right contents not being centred is due to there not being any space on the left to centre them. The scroll box can't over scroll to then centre them as there is nothing there beyond the scroll box. I did add a spacer to try and solve this but it didn't work, so I'm not sure on how to fix this.
​
A fix I just found is to add padding on the left and right of the Size Boxes, which then properly centres each contents of the tabs and also adds leeway to them.