Monday, March 2, 2015

First try: browser plug-in

What did I do: a plug-in (with both chrome and firefox version) that filters out articles with certain tags so they can't be seen when you are searching for some other tags.

Why did I do it: the blogging site was dominated by fangirls and I happened to know a few of them. They often complain about how checking articles under certain character tag becomes a traumatic experience because they see people or pairings they don't want to ever see again. I figured if so many people want a tag blocker, doing a tag blocker would be cool.

A bit more on the market research: the site was a Chinese version of tumblr, so I know if I can get someone popular to recommend my plug-in, that would mean a lot of exposure. I have a few followers who followed me for my anime analysis, and one of them is a very good fan fiction writer, who also knows a lot of fan fiction writers.

How did I do that: 
Core code: Javascript, for loop, getElementByTagName to extract the tag string then replace it, for loop again for removing items from document.
UI design: use a single line textbox for text input, and create buttons within the panel for each tag blocked, clicking on the buttons will remove the tag from block list.
Utility: the website uses lazy loading, to ensure the newly-loaded content will also be filtered, I used a MutationObserver and rerun the filter function when the page is changed
Chrome/Firefox integration: it's actually pretty much the same, but I would suggest starting with Chrome then port things to firefox just because Chrome has better debug support. Also, don't trust your professor when he said you can use some open source editor for writing HTML/Javascript, just use plain old Visual Studio, it works better than anything else.

A little proof:

1959 likes and 103 comments so far, left out other content because I really don't want to associate my anime account with my real life account.

TL,DR: made a plug-in to block articles with certain tags on a Chinese blogging site, got ~1000 likes within the first day.

Unreal notes: health bar system

I was requested to make a health bar system in UE4 that:
1. Correctly shows the enemy's remaining health percentage
2. Changes transparency based on the distance between player and enemy
3. Has this "shrinking animation" so when enemy takes a chunk of damage, rather than having its health value "jump back", it has the part between original health value and current health value changes color, then the part with different color will shrink until it disappears

So, how do you do that?

 To make a "shrinking effect", it is better to draw two different health bars, one under another. To explain it more clearly, let's assume the top bar is green, the bottom bar is red, enemy health bar will normally appear green, and have a red "shrinking" part when damaged.
Now we just set the green bar's value to enemy's current health and update it every tick, so the green bar will always reflect enemy's real health value. When enemy gets hit, it will suddenly decreases, and expose the red bar underneath.
For the red bar, we just need to check if its value is bigger than the green bar.If the value is bigger, set red bar's value to decrease at a constant speed, until the two values are equal. (Probably can have a picture here when I get to the lab)
If you also want a dark box underneath your health bar, don't use the unreal setting as you won't be able to adjust its transparency later, use a separate health bar, put it at the bottom, and fill it with whatever color you want.

Note that we need to keep a reference to the NPC object inside our widget so we can get the correct health value inside widget's tick function, we will also need the reference later to update transparency.

To update transparency, we calculate the distance from player to the actor we kept a reference of, clamp it between X and Y, where X is the maximum distance where alpha = 1, and Y is the smallest distance where alpha = 0, then calculate alpha = (distance-X)/Y, and use "set fill color and transparency" to set alpha, keep in mind you have to set color too.

For the having widgets showing up part, I found this tutorial works much better than the 3D health bar tutorial on youtube. Since it will be outdated pretty soon, I will not go into detail about it.

(Note to self: add pics later to explain things)
  

Widgets in UE4: looks promising, but you probably want to wait a bit longer

For the past few months I was working with widgets in Unreal because, well, there isn't much left for gameplay and we were short on UI people. It certainly looks promising compared to most of the other UI stuff I have used(see: Unity default UI), but it is so buggy that I won't recommend shipping anything with widgets at this point.


What I am seeing at this point:
Bugs: "remove from viewpoint" was replaced by "remove from parent" in the later versions and it does not always work that well, sometimes the UI component was not removed and it is better to set the component visibility to hidden before removing it.
Another bug I found is that the widget animation editor will not allow you to drag your marker around and set your keyframe, when that happens, the section appears grey. It could be fixed by restarting the editor, and it took me 2 hours to realize it.

Undocumented methods: my widget appears grey in all screen setting, took me two days to play with post processing and everything else before I realize you should always mark your widget as "activated", or it will appear grey. There was nothing said about this in the official tutorial. On the bright side, I fixed a few bugs, migrated the most problematic code from blueprint to C++ and improved the health bar quite a lot, all because I thought it would be cool to trust the comment when they said "activate" decides whether player can interact with the widget.

Lack of functions in general: The ability of having 3D widgets and having 3D widgets that always faces the screen was added really late, and by 4.7 the screen space rendering still bugs out sometimes. To adjust the transparency of certain element that is not a picture, you have to adjust the color value too, which is just weird. When doing our health bar, the progress bar widget only allows adjusting the "fill color and transparency", so I ended up drawing another black progress bar and adjust the transparency of that box, just to create the illusion of a border.



Widgets also lacks integration with C++ code, last time I checked , the widgets are not even documented well in the API. I would love to do something more with widgets but having everything done in blueprint is scary :/