LEGO Universe News! Minifig Wizard – Technical Details

Unlike my last log, this post will be much less technical, simply because of the long development period it was spread out over.

On March 5, 2014, rioforce and I officially released the LEGO Universe News! Minifig Wizard.

The release ended a 7 month (August 2013) on-and-off development process between us. The concept for the LUN Minifig Wizard was conceived even further back, between late February and early March. Undoubtedly this has been the longest idea-to-release development I have yet undertaken. Normally programming ideas are discarded or acted upon before this time. Further more, as you know, I have only been programming for a little one year, making the release even more amazing.

While I will not rehash all that has already been said in the official announcement, the LUN Minifig Wizard started out as a reaction to suggestions the entire LEGO Universe News! Forums staff members had received concerning an official but never used MLN-style minifigure creator created by TLG. The creator contained a variety of images for head, torso, leg, headpieces, and right/left hand items which could be combined to create a LEGO sigfig. The LUNF staff (I am a forum moderator while rioforce is an administrator) had embedded the creator on the forum for use by the members. The suggestions we received was for us to update the creator with new images and parts rioforce would render.

For all accounts and purposes, this was a great idea. Although it would take some work to recreate the minifigure’s pose from the existing images, it was technically possible to expand the creator. However, we did not feel it would be right for us to carry out a plan for one major reason: we did not initially create it. Another reason was it was created in Flash, and we would rather have a pure web technologies creator than use Flash.

All this took place in March 2013. At that time, I had just discovered programming. The possibility of me writing this was unheard of. Rioforce tossed around the idea of making one in Unity, but that never came to fruition. All in all, making our own creator seemed like a good but impossible idea.

Fast forward to August 2013. By this time, rioforce and I had both gained much experience in rendering and coding, respectively. I had also just started college to pursue a degree in website design and development. Suddenly this idea came back up, and we decided to move on with it. After brainstorming on how it should work, I began writing some early code. In November, rioforce drew a sketch of the creator layout, now dubbed the Minifig Wizard. Although I was against the idea, I began implementing it while rioforce made up the images to be used in the wizard. Soon thereafter, we stopped work again, although we did work on it every now and then. Finally, in March 2014, a full year after we had the initial concept, the LEGO Universe News! Minifig Wizard was released. Feedback received was nearly all positive, the only downsides begin a lack of available parts to choose from.

Work Goals

Obviously we did not set out on this endeavor without guidelines and goals.

  • Write it using pure web technologies: HTML5, CSS3, and JavaScript.
  • Store a list of available images for section in XML and use that information to generate a table containing images to click.
  • Design it to draw inspiration from the LEGO Universe backpack, but also allow the selection table to be enlarged to see more options at one time.
  • Have a button to open a new window containing the selected parts for better screenshots. Options such as image size and background color available under a hidden panel.
  • Have the table enlargement and contraction animate rather than suddenly change.
  • Provide a variety of parts to choose from using several periods of minifigures.
  • Mobile browser support is nice but not required.
  • Use non-raster graphics when possible. Use SVG for buttons, CSS for backgrounds, and type for any text. Rendered images are compressed PNGs.
  • Mandatory and equal cross browser support, while supporting IE9 as the minimum IE version.

Work Log

Trust me when I say the items listed here are greatly generalized. Because of the long development period and split work between rioforce and myself, it may appear most of the work was code. This is not the case. Both sides were equally as important as the other, and both sides mixed elements for the other. Furthermore, since I am a coder, I am biased to report from the coding perspective. If rioforce were to write a technical details post, it would be bias on the rendering side. If either component were taken away, the Minifig Wizard would not be what it is. Also, I had only begun website development when this all begun, so most of this was new to me.

  1. Obviously I started at the beginning, which was a basic prototype. I had to learn how to parse the XML document. Using a preexisting XML I modified with recognizable content, I slowly gathered code to extract the information and convert it to a usable form.
  2. Once I got that working, I modified it to construct a table using the information. I also made it display a corresponding full size image when the thumbnail was clicked.
  3. A UI concept was sketched by rioforce. I objected to it at first, but I slowly warmed up to it. One of the ideas was to have an expanding table to display more items at once. The table would expand using animations. I implemented this using jQuery animations (side note: this right here is the very reason I began jQuery in my projects).
  4. I wrote a Python script to generate the XML document for parsing, with error checks for common errors
  5. After running into development limitations caused by Google Chrome security features, I began researching how to parse the XML using jQuery rather than XMLHttpRequest directly.
  6. While all this was going on, rioforce was working on a minifigure model for use and compiling more of his LEGO texture library to use and designing UI elements, including buttons. We also developed a Blender Python script to automate the render workflow.
  7. The UI needed to display consistently across browsers. The one element that changed between browsers. This was remedied by making use of perfect-scrollbar and customizing the look.
  8. A break was taken to rework the LUN Patcher using the same core goals as the Minifig Wizard (pure web technologies and cross-browser support). UI elements were ported from the Wizard to it, primarily the CSS background and scrollbar. This was done to create a consistent look between projects.
  9. A button to open a new window with a larger version of the minifigure was added. With this, better screenshots can be taken. Small options, namely image size and background color, were added and hidden under a panel animated using a CSS transition.
  10. SVG images for categories and buttons were implemented.
  11. A Grunt workflow for linting, minifying, and package management was added. This has been a huge time saver in coding.
  12. All images were compressed using PNG Monster, decreasing resource sizes
  13. Last minute fixes, such as changing jQuery to be pulled from their CDN and minifying all code a new was done leading up to the publication.
  14. Once it was released, I had to push a quick fix to remove an image overlapping issue that had been reported three times already (obviously we missed that bug ๐Ÿ˜› ).

Reception

With the release of the LUN Minifig Wizard, my largest web project to date (my largest programming project being PatchIt!) was complete… for then. We expected to have to follow-up with new images, bug fixes, and responses to critics, but what we received was partially unexpected. Nearly every person who used it said it was good. In fact, the only “bad” feedback was related to minor issues that could be fixed later on and the lack of image variety. I would have expected at least some negative points on the minifigure, animations, colors, or even functionality. Rather, none of that was present. As I said, it was mainly on the lack of image variety (something we were completely aware of) and minor issues.

Despite just releasing it last week, I am already working on the code for the next large update to address feedback, fix IE9 bugs (I had no way to test IE9 during development; consequently I pushed four consecutive commits for IE9. In fact, most of the work has been related to IE9 support in some manner), fix other issues, and add/improve features (some of the changes are rather large). New images are still in the planning phase. ๐Ÿ˜‰ Even after all this work, I have still more improvement plans, so my master plan will still be play after the next update. Trust me, when I tell you, I have been working on this update, I have been working on this update. It is that big.


This has been a bit different from my last technical details post, but that’s just the way this one turned out. Hope you enjoyed. ๐Ÿ™‚

-le717

Advertisements

One thought on “LEGO Universe News! Minifig Wizard – Technical Details

  1. Just a quick note: I went through this entire post and clarified every paragraph. Went I went to update it, WP for Android, without warning, overwrote my changes with the live version (which was the revision I had before I started editing. I’ll try to rewrite the changes soon. sigh

Triangular Reactions

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s