|
|
# How to style.
|
|
|
|
|
|
**Or: How you can create visually pleasing, highly functional Blueprints in Unreal Engine 4.**
|
|
|
|
|
|
* [The Basics](how-to-style#the-basics)
|
|
|
* [What's special about blueprints?](how-to-style/#whats-special-about-blueprints)
|
|
|
* [Tips and tricks](how-to-style/#tips-and-tricks)
|
|
|
* [Typical workflow](how-to-style/#typical-workflow)
|
|
|
* [Some images](how-to-style/#more-images)
|
|
|
|
|
|
---
|
|
|
|
|
|
![Don't do this. Please.](https://gitlab2.informatik.uni-wuerzburg.de/IGAME/IG-Management/raw/master/styleguide/dont.png "Spaghetti!")
|
|
|
(This is bad.)
|
|
|
|
|
|
|
|
|
Obviously, the most important aspect of a Blueprint is its content. But that content becomes a pain to work with for everyone else (and at some point probably even yourself), if you spend all your time creating functions and no time structuring them various components.
|
|
|
|
|
|
## The Basics
|
|
|
|
|
|
Similar to writing normal code there's a couple of guidelines you should follow:
|
|
|
|
|
|
* If you name something, select a meaningful name. This applies mostly to variables, but also for example to the Blueprint's name itself.
|
|
|
* Create a structure within your Blueprint. If you're writing code, you don't use "Go To" operators to jump randomly all over the place either, do you? Keep together what belongs together and separate what you can.
|
|
|
* Comment! In Unreal Engine 4 it's incredibly easy to add a comment to items of your Blueprint. Just select the items you want to comment and then press **C** on your keyboard! Enter some useful text and you're good to go. Bonus: You can move all the elements inside a comment at once! :)
|
|
|
|
|
|
|
|
|
## What's special about blueprints?
|
|
|
|
|
|
Now, to talk about the blueprint-specific stuff. What I mean with _Comments_ and _Lines_ should be obvious, and _Elements_ are all the boxes you can place, usually connected by Lines and surrounded by Comments.
|
|
|
|
|
|
* **Overlapping Things**: Don't do it. Please. There's a lot of space in your blueprint and absolutely no need to have overlapping Elements. The same goes for Comments/Everything else (Especially the little popup-bubbles they create on their upper left corner shouldn't cover anything else), and Lines/Elements. (Crossing lines can't be avoided some times, see below.)
|
|
|
* **Direction of lines**: Please make sure to avoid lines "going backwards". If possible, the connections between your elements in the Blueprint should point to the right and be as straight as possible.
|
|
|
* **Crossing Lines**: Avoid where ever possible. Sometimes it's not possible to avoid crossing lines, but please minimize the number of intersections inside your Blueprint.
|
|
|
|
|
|
## Tips and tricks
|
|
|
|
|
|
There's a few things you should keep in mind while cleaning up your blueprints. They aren't really guidelines, but rather fit into the category "nice to know".
|
|
|
|
|
|
* Reroute lines via Redirect Nodes: Drag a line to an empty area on the Blueprint and select "Redirect Node" from the very bottom of the list. Continue your line from that node. In the end, make sure that you haven't duplicated a connection (i.e. if you're using a Redirect Node to re-route a line, make sure you remove the old connection).
|
|
|
* Give Modules a "starting point". If you collected a couple of Elements inside a Comment-frame, but that piece of code is part of a bigger Blueprint (like the gesture recognition in the MotionControllerPawn) place a Redirect Node on the right side of your comment-frame. That way you can move your code around freely inside the "module" or the module around inside the Blueprint and the connection to it will stay prettier.
|
|
|
* Did you know you can multi-select Elements and Nodes really easy? If they're inside a comment box, you can move the comment box around and the content will follow. If they aren't, you can multi-select Elements by pressing SHIFT & clicking on them or by drawing a rectangular selection with your mouse. You can even combine the methods and select nodes, then press SHIFT and draw a selection over a few more nodes to add them to your selection.
|
|
|
* This should be obvious, but I'd rather tell you something you already know than not tell you at all. You can move everything around with your arrow-keys. Whoah!
|
|
|
|
|
|
## Typical workflow
|
|
|
|
|
|
![Step One](https://gitlab2.informatik.uni-wuerzburg.de/IGAME/IG-Management/raw/master/styleguide/1.png)
|
|
|
|
|
|
Say, you have been working on a cool feature inside a Blueprint all day and now you're as good as done, but you want to do the Integrations-team a favor and you decide to make the Blueprint look pretty. Where should you start?
|
|
|
|
|
|
#### Fist off all, straighten
|
|
|
|
|
|
Make sure the most important line in your Blueprint is straight. in this example (and probably in most other cases) that's the white line which's job is to link Elements in their order of Execution. Most Elements have just one In- and Output, so this should be pretty straightforward.
|
|
|
|
|
|
![Step_Two](https://gitlab2.informatik.uni-wuerzburg.de/IGAME/IG-Management/raw/master/styleguide/2.png)
|
|
|
|
|
|
#### Step 2: Stretch
|
|
|
|
|
|
Once your main line is straight, you can focus on having all lines point "forwards", that is to the right. Lines should never flow in inverted "S" shapes, stretch your Blueprint to the right until that doesn't happen anymore.
|
|
|
|
|
|
![Step_Three](https://gitlab2.informatik.uni-wuerzburg.de/IGAME/IG-Management/raw/master/styleguide/3.png)
|
|
|
|
|
|
#### Finally: Polishing
|
|
|
|
|
|
Now hat you're done doing all that stuff, check the details.
|
|
|
|
|
|
* Are there any lines flowing behind other items? Use Redirect Nodes to guide them around!
|
|
|
* Are there lines you could straighten? Do it!
|
|
|
* Do you have wasted space between your elements? Move them back together!
|
|
|
* Do you have Elements that do similar things? Arrange them the same way so that someone looking at them can find a pattern quickly!
|
|
|
|
|
|
![Step_Four](https://gitlab2.informatik.uni-wuerzburg.de/IGAME/IG-Management/raw/master/styleguide/4.png)
|
|
|
|
|
|
## More images
|
|
|
|
|
|
Have a look at this before/after example. See how it started out with a lot of S-shaped and crossing lines? There's a solution for most Blueprints, and even though the red version still has some crossing and not every line is 100% straight, but it's a big improvement over the previous chaos.
|
|
|
|
|
|
![Before](https://gitlab2.informatik.uni-wuerzburg.de/IGAME/IG-Management/raw/master/styleguide/before.png)
|
|
|
|
|
|
![after](https://gitlab2.informatik.uni-wuerzburg.de/IGAME/IG-Management/raw/master/styleguide/after.png) |
|
|
\ No newline at end of file |