I actually wrote my first AngularJS app a few months ago, back in February. However, despite the long delay, I wanted to do a proper writeup describing my experience – mostly because it was a lot of fun!
Below is a screenshot and link to the demo site I created. It was a proof of concept for a simple consulting site, complete with real-time charts and graphs. If you open up the website in two windows, and change some data, both windows will automatically update – the graphs and charts will animate the change. Awesome! The code can be found on my bitbucket account.
So I finally decided to take the plunge and start learning about hosting in the cloud. In the four years that I was out of the programming game, this has to be one of the areas that has seen the most rapid change and development. What was just starting to take off back in 2010 has now become a virtual necessity for most programmers, and is one of the most important things for me to catch up on. Seeing as most of my recent experience was in a .NET environment, I decided to get my feet wet with Azure.
It’s been quite a while since I’ve done any real web development, so it took me a few days to get up to speed with ASP.NET MVC 5, EF 6, and Azure, but after a weekend of tutorials and experimentation, I was up and running. The screenshot below is what I managed to create – a simple recipe website my mom has been wanting for years. Sadly, it’s far from finished, and is more of a quick demo to get me familiar with Azure. I doubt it will see true completion any time in the near future. Sorry mom!
Mom’s Best, a simple recipe website for my mom (no longer live)
I plan on leaving the site up indefinitely, or until Microsoft decides I can no longer host it for free. The code can be found here, on my bitbucket account. To wrap up this post, I’d like to give you a few of my first impressions of Azure, mostly pertaining to simple website development.
I’ve given the shadow system some much needed love, so I figured I’d throw up a quick demo. It looks considerably better than the previous version. Here’s what changed:
Removed the horizontal “swing” effect by skewing every vertex in a sprite based on its position relative to each light source, rather than skewing all vertices by a uniform value. This also has the added effect of allowing shadows to appear on both sides of a building when standing in front of it.
Added a transparency lerp when close to the object’s pivot (vertically). This eliminated the vertical “swing” effect, and corrected issues with large objects (the inn) not being tall enough to properly overlap a large light source.
Blur added. This also corrected an issue where the tops of fence posts appeared warped.
Added a configurable vertical shadow offset for each sprite, which makes tree shadows look significantly better.
Web player (requires Unity Web Player)
I’ve been working on a simple platformer for the past week or so, and wanted to get a quick demo up. It’s certainly not feature complete, but the first two levels are playable. It’s meant to be a sort of cutesy game, for kids. Check it out!
Web player (requires Unity Web Player)
As I quickly learned, there are a ton of techniques and tools used for creating water in Unity. The Standard Assets package includes pretty much everything you need to get the basics done, but there’s loads of third party tools availble to extend that functionality. There’s tools like Flow and SmartWater, and there’s also lots of interesting optimizations, like creating custom water meshes. But, to my dismay, almost everything out there is designed for 3D environments.
Granted, it probably would have been possible to adapt some of these tools to achieve an acceptable 2D top-down water effect, but it would almost certainly involve code changes and creating a new shader or two. I was looking for a solution that would be simple to implement, well documented, and that didn’t involve adapting a lot of 3D objects or concepts. Here’s a summary of what I was looking for:
- Don’t need to interact with lighting
- Don’t need reflections
Needs support for a transparency mask. Because we don’t have any 3D terrain in a true 2D game, we need a mask to define where the water is drawn, and at what opacity.
Multi-directional and multi-speed flow map support (different areas of the same water texture can flow in different directions and at different speeds).
A flow map generator/editor that can be used within Unity, so I don’t have to create them by hand in Photoshop
A few third party tools looked promising, like Flow, but they clearly designed for a 3D environment, and were a little lacking on documentation and examples. I wasn’t about to blow good money on something that I wasn’t even certain would support what I was trying to achieve. Since I was unable to find any sure-fire solutions on the asset store, I set out to create my own.
I’ve got a basic demo up and running now, so I’d like to share. There’s a lot of work left to do, but it’s coming along!
Web player (requires Unity Web Player)
Major Completed Tasks
- World builder tool
- Sprite builder tool for generating sprite effects (article coming soon)
- Zone importer wizard in Unity
- Imports all assets generated by world builder into current scene
- Collision detection import from Tiled
- Actor importer
- Automatically slices sprites
- Generates mecanim animations (directional movement, attack, cast, death, etc)
- Basic lighting system
- Time of day color
- Angled shadows (needs revamp)
- Positional shadows
- Multi-direction water flow shader, custom water flow vertex painter tool
- Basic weather system (rain, snow, water ripples)
- Polygon sound source system for large objects (rivers)
- Waterdepth/Transparency shader for all actors
- Shadow blur
- Redone shadow system (no more ‘swinging’, better skew method)
- Consolidated collision detection (article coming soon)
- Free camera mode (zoom, pan)
- Dialog system (using Articy Draft 2)
You don’t have to be in game development long to realize the need for a good level editor. For my 2D game, I experimented with quite a few tools. There are definitely some great 2D level editors out there, like Tiled, which I still use for simple things like static collision detection and tile types. However, like usual, I wanted a little more power. Here are a few features that I really wanted, but are difficult to find in most 2D level editors:
- Non tile-based
- The ability to resize/scale/flip/crop sprites
- The ability to re-color/tint/erase portions of a sprite
- Supports drawing paths (for moving npcs)
- Can preferably set per-node or per-segment data (for defining wander radius, speed, loiter time, etc)
While there are a few solutions that come close, such as GLEED2D, for my needs, I felt it was still lacking. I spent a good chunk of time trying to find the perfect level editor, and then I had an epiphany – Photoshop does all of this already!
When working on my 2D lighting system, I needed to create some shadows. Shadows for sprites can easily be created by skewing the sprite and drawing it in all black. How much you skew depends on the position in relation to the light source. I already had a lighting and shadow system working in XNA, and now I just needed to get it working in Unity.
My first thought was to perfrom a skew from within Unity, in C#, like I did in XNA. As it turns out, you can’t (you can skew GUI elements, but not actual game objects). If you want to skew game objects, you need to skew the mesh itself, which I did actually get to work. However, this solution was a little ugly, and I’m not sure about the performance ramifications when recalculating every frame. So, I set off to find a more elegant solution.
At first glance, flashing text in a custom Unity editor window may sound like an annoyance, and it certainly can be if used inappropriately. But it can be a useful tool for catching a user’s attention if used responsibly. I use it in a few of my custom editors to alert the user to various situations:
Missing components. For example, my vertex painters won’t work if the selected game object does not contain a mesh component.
When you’re locking standard scene selection. For example, when my vertex painters are in “Paint Mode”, you cannot select scene objects when clicking in the scene. This can be confusing if you forget you are in “Paint Mode”, or you are using the tool for the first time.
Warning messages. “Changes cannot be undone” might be a good candidate.
For the past few days, I’ve been spending most of my time in Photoshop, designing my first zone, “Tambrook”. Not everything is done yet, but I’m pretty satisfied with what I’ve completed. Sadly, I haven’t even started working on the inn yet, and that will likely be the biggest challenge.
All of these designs were created using graphics from the various versions of the RPGMaker series. Special thanks to Celianna, as I’ve used a lot of her resources as well.