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 :/

Unreal Notes:

A list of things I wish I knew when I started. It seems like I did went through a lot of #%$@...

Q. When to move things from Blueprint to code?
When things are getting hard to read, or when you decide what something would be and won't change it anymore for gameplay purpose. For example, a raycast function for collision can be moved into C++ code, but a function that sets the health of player should stay in Blueprint.

Q: What are the most useful Blueprint functions?
Branch (the if statement for Blueprint) and Sequence (for executing multiple function block), Select is also important but it is confusing thus less useful.

Q: How should I use events?
Use Tick events wisely, don't put everything in there unless you have no other choices. Use delta time from tick events for timing.
When making events that have both a blueprint side and a C++ side, call the parent function at the end of your blueprint function block to execute C++ side.

Q: Some functions that I need to know how to use?
Select is pretty weird to use, you need to reset the pin type and set pin class to the one you want.

Q: Something about materials?
If in an online tutorial they have a black and white texture and you can't get it right using the exact same blueprint, try setting texture compression format and texture property to mask.
Use material instance to create the variant of the same material, and remember to set material parameters.
If you use a dynamic material, remember to keep a reference to it in your object to really change it dynamically.

Q: Something about post processing?
Check the Style tutorial and the ContentExample tutorial if you want a clean outline material.

Q: Something about AI?
 If you want to do a "stun" for NPCs, try to just eject the controller rather than setting up AI state in different AI trees, it works great if you don't have a more complex AI system in mind.
Now that I think about it, all crowd control effects should be dealt with as controller problems, as it should not change the AI behavior...Need more research.

Q: Something about particle?
Start by copying/pasting someone else's particle, disable different component and see how it goes. Don't create your own particle when you first start.
Don't set particle color to variable if you are not satisfied with the look of the particle. After setting it to variable, the preview window will not work.
Particle System means just one emitter, don't be fooled by the name.
In case you don't know, a particle is a flat rectangle that always faces the camera, a emitter is something that produces these rectangles.

 Q: Something about Matinee cinematic tool?
It is really easy to use if you had any Maya experience, follow the official tutorial. You only need some movement and camera track anyway.
Use two monitors will save you a lot of time.

Q: Something about the UI?
Use widgets and the interface is pretty self explanatory.  There isn't much tutorial about widgets but they are really easy to use. Use Blueprint events such as "on construct" to make your UI widget interact with your game.
For widgets, On Construct events are called WHEN ADDED TO VIEWPORT, not when they are "created". Convenient but hard to realize :/
Also, widget are referred to as "UUserWidget" in code.Remember to #include "UMG.h" and edit the <YourProjectName>.Build.cs file (should be inside your project folder) to have it include "UMG" by adding it like this: PublicDependencyModuleNames.AddRange(new string[] { " UMG"});
If that line already exists, just add UMG into the bracket.
When trying to change the content of the widget, choose the content and check the "variable" check box.

Q: Compilation and general concerns?
Removing a file in Visual Studio does NOT remove them from your project, use the solution mentioned here, rename the file and rebuild.
 Using int could cause unrecognizable type error because of reasons stated here, too bad we found it much too late :<

Game Design: Brick Monsters

This is a game I always wanted to do: a game of Pokemon meets Puzzle and Dragons where you adventure in the augmented reality world to find upgrade for your own pet monsters. It was largely inspired by Path of Exile (well doesn't look like it at all) in its gameplay. This design document was written for a project proposal that did not get passed, I might come back to revise it someday :3


Gameplay:

Brick Monster is a turn-based augmented reality RPG game for Android where players rise their own clan of monsters and use them to fight off evils both in the physical world and the virtual world.

Brick monsters are brick-like little monsters that has special ability to fight off evil. Their power, appearance, skill and attributes will change based on the user’s interaction with them. User can decide what their monsters will look like and develop into by feeding them different food gained in battles, and letting them interact with different physical environment.

Monsters has five attributes: fire, water, grass, light, dark. Attributes are numerical values and a monster can have any combination of attributes. Improving attributes will change a monster’s allowable body color range, the allowable body texture and the personality of monster. When a monster’s attribute exceeds certain value, it will also learn new skills. Each monster can only remember 4 skills at a time, if a new skill needs to be learned, an old skill has to be forgotten. Both feeding and interacting with monsters will change their attributes.

Monsters has no levels, but they have three stats: strength, intelligence and utility. Strength influence a monster’s health, intelligence influence its spell power, and utility influences its speed. Stats will also unlock “support skills” which grants new power to their skills and influence their look, and support skills will never be forgotten. The only way to improve stats is to feed them monster food.

(Concept of what a monster should look like)

While there is no level limit, feeding monster will make them grow in weight, and eventually reach a value where no food can be fed to the overweight monster.

When fighting in dungeons, users will need to organize a team of three monsters, then carefully choose their skill combination and team arrangement to fight off enemies. There are three team arrangement available: aggressive, defensive and normal, each amplify the damage received and dealt differently. The three monsters will have a combined health bar, but each will take action according to its utility value, just like in a traditional turn-based RPG.

 (Concept for the team arrangement, blue dots represents the monsters.)

More peaceful users can choose to keep their monsters as virtual pets. They will be able to scan the surrounding environment and have the monster showing up in the environment. Environment’s color and the real-world time will influence monster’s behavior, and if an image target is recognized, the monster will can interact with that image(e.g. playing with characters in an animation poster).

User will start off by making a default monster, given a few points to spend on different stats and choose only one basic attribute. The look and skill of the monster will be dependent on its attribute. To start battling, user can choose a dungeon from a list of dungeons provided by the game, or scan their surroundings and use their monster’s power to find dungeons. User can also start by interacting with their monsters and put them in certain physical environment, while interaction cannot directly provide stat boost, monsters can discover monster food in the scene that can be fed to the monster later. 

The game will be developed in Unity with Vuforia plug-in for augmented interaction.  I decided to use cube-shaped monsters so the textures can be easily swapped using Unity and animation would not be difficult, Scaleform plug-in might be used for better UI development.

Rationale and Innovation:

This game was designed to promote the use of augmented reality. It contains enough non-AR gameplay elements to attract users who are afraid to try new content, while provide enough benefits for those who tries to use AR and make it a meaningful add-on for the game.

Below is an example of how the brick monsters will show up in a real world scene using Vuforia

 

(The example was developed by me in less than 3 hours)

Brick Monster is a game where the players really decide what their characters are going to be. User will be able to choose their monster’s look and skill to make a real monster of their own, and no two monsters are going to be the same. While there are many virtual pet games out in the market, very few of them have a meaningful customize system that makes the user feel related to their character. Moreover, the games that allows customization are mostly focused either on the look or the battling ability, but not both.  Therefore, able to customize both the look and ability of the monster through battling and interaction will attract both hardcore users who like to try out different skill combination, and softcore users who would like to make their own monster that looks unique. The turn-based battle will be friendly to people of all ages as it does not require fast reaction, and allows user to put the game down at any time to pick it up later without fearing to lose, which is important for cell phone users.