League of Legends API Challenge Entry - PowerSpike

On Monday, August 31st, I could enter no more code.  It was done, complete, or as much as it could be with the time invested.  I had finished my entry for the Riot Games, API Challenge #2.  I had created and submitted PowerSpike.

The API Challenge I took part in was to create a web application that referenced data sets from before and after a massive itemization change that Riot made to their game, League of Legends.  When I read the requirements, it sparked an idea.  What DID the data look like for champions as they got kills throughout the game?  How many kills in each minute of a game, does a particular champion get on average, and how did those item changes affect that?

And so I set out to satisfy that curiosity.  I began work on an application called PowerSpike, using NodeJS to serve up a web server, as well as run the parser which would collect the data.

Those two parts contain much of the application code.  

The Riot API Parser

First, the parser runs through each match, pulling down the data from the API and reading in the kill data for various champions in each match.  I chose to use the four data sets for the North American data, since those are the servers I play on and I wanted to limit the amount of data to specific regions.

When the parser starts up, it checks each of the matches in the riot test data files against a list of match IDs that have been parsed already and if they haven't been parsed already, it queues them up to be run.  Then it gets the data, grabs the kill times for each champion and stores that data in MongoDB as kills per each minute.

It does this slowly, waiting between each request so we don't hit rate limits by the API.

The Web Server & Client

The other half of the application is the web server which exposes a few endpoints for data retrieval from MongoDB, as well as the client static pages, which display the data in line charts over time throughout a game.

Chart.JS is the library for displaying data that I used and it's pretty good at the basics.  Each of the four data sets gets compared to one another.  I also modified the chart to allow the user to toggle datasets with the legend as well, since the basic UI can be cluttered.

There are some very interesting data points for a few champions as well.  For example, Ahri gained a significant boost in early game kills for normals after the patch.  This could be due to the much earlier Needlessly Large Rod that players could now purchase at an earlier time.

But either way, the data points are pretty interesting. and there are a few champions like Kayle and Teemo that have some pretty interesting data to look at.

Hosting

I decided to host the project on a web server, so I spun up a new Digital Ocean droplet and purchased powerspike.xyz at NameCheap.com for 1 dollar for the first year.  I highly recommend Digital Ocean as I run many of my projects off their boxes.  You get full control of the VPS and it's great for being able to do all sorts of interesting projects.

It was a pretty fun challenge, and it's now in review for the next month, so we'll see how it goes!

You can view the application at:

http://www.powerspike.xyz

And the full source code is at my GitHub:

https://github.com/WakeskaterX/PowerSpike

Feel free to check it out and let me know what you think!

Cheers,
Jason C.

[Contest] League of Legends #IAMRIVEN Twitter contest

Contest:

So the contest is posted here:  http://na.leagueoflegends.com/board/showthread.php?t=2669362

But basically you have to send in a picture of you posing in the Championship Riven pose over twitter and hashtag #IAMRIVEN as well as be a follower of @LeagueOfLegends.

So here is the championship riven splash art you are supposed to mimic:

And HERE... is me looking retarded while mimicking the pose:

Ah well It was a fun thing to do right before I pass out for the entirety of my day in preparation for my next 12 hour shift tonight.  Hey maybe I'll win a championship riven skin!  And maybe not... I can always hope. 

Anyway, just thought I'd share that.

Cheers!

~WakeskaterX~

[Design] Talon, The Blade's Sprite

Design:

Today I bring you a new miniature League of Legends character Sprite!  Talon has long been one of my favorite characters in League and here he is for you to bask in all his miniature glory!

First I pulled this image off the web:

Which I shrunk down to your typical 80x80 sprite size and then outlined him and here are the three steps to completion of the sprite:

**If you haven't read how I make these sprites from my "how to make sprites" post, see here for a more detailed explanation:  http://spaceblasterx.blogspot.com/2012/10/design-how-to-make-sprites-pixel-art.html**

1.  Got my black outline from the shrunk image

2.  Filled in the main background colors and got my initial palette.

 3.  Added colors as needed to the palette and finished shading the sprite.

4.  And one more fun step for good measure, gave talon a background and a title:

EDIT:  With touch ups (didn't like the shading in his left knee).

And there it is!  My Talon Miniature Sprite.  If you like the sprites I've done so far subscribe to the blog to see more in the future or leave a comment about what character you'd like to see sprited!  

Thanks for reading!

~WakeskaterX~

[Design] How to make sprites (pixel art)

Design:
  So I have had a few questions about how I made the Kha'Zix sprite from the large image.  I'll show a few of the steps here in this blog and do a little tutorial on how YOU can make your own sprites.

First you want to have a picture for the way we are gonna make sprites.   You can draw a picture and scan it in, or pull one off the web or take a picture of someone and upload it.  Whatever you want to make a sprite of, take a picture.  Now the detail of the picture is going to be important too because if you want to make an 8 bit sprite, having a detailed picture is simple not going to work.

So we'll start with a picture, and since I just made the Kha'Zix sprite, we'll look at that:

1. Picture

Rendered KhaZ

(I just found this on Google Images, credit to whoever uploaded)

2.  Decide on a sprite size (in this case 80x80 pixels) and size the image down to that in a program like Paint.NET (free) or Photoshop.  

Mini KhaZ:

(This looks nice, but it's not a custom made sprite since it's just a small version of the big one)

3.  Begin a black outline of the sprite to get the shape of all the limbs, wings, etc.  Put this in a new layer so you can click back and forth and see both of them individually.  

Outlined KhaZ:

4.  Choose your color palette to begin with.  In this case I chose browns and purples, and some reds and greens for the wings.  I usually draw my palette on the side of the image for simplicity and ease of use.  You can also customize your color palette on the tool menu (in Paint.NET at the very least).  In this image I also started coloring in his head.  You are going to want to determine a light source and use lighter outlines and darker outlines for the light.  Generally you don't want to use too much black in your outlines except in the darkest areas.  

Palette and Head KhaZ:

5.  Spend lots of time coloring your guy in and you are done!  I generally fill in the areas with my main color and then add shading and outlines to the guy.  Here you can see me about halfway done coloring the sprite and then the finished sprite.  As you will see if you magnify the sprites, my color palette evolves as I go and feel the need to mix and add intermediary shades.  I may have added too many shades but it came out looking alright.

Halfway Colored KhaZ:

Complete KhaZ:

And also I just updated some colors on the sprite to make his spikes a little more grey and added a few pixels to represent his teeth a bit better:

Updated Kha'Zix:

So that's how I made the Kha'Zix sprite, it took a few hours and plenty of zooming in to color and draw him pixel by pixel.  I also got rid of pixels here and there that seemed out of place and used a little artistic license when drawing him (which is always necessary when shrinking an image down and making a sprite out of it).

Hope you liked the sprite and reading about how to make your own!

Cheers,

~WakeskaterX~

[Design] It's Evolving! Kha'Zix Pokemon Sprite

Personal:
  My night shifts have really thrown me for a loop these past few days.  I've been awake for periods of 7 or so hours at a time then I need to sleep again.  Slept most of my days off and I go back to work in twelve hours as it is 7 am now.  But in all my narcolepsy and insomnia I did something sort of productive!

Design:
  I wanted to make a 80x80 sprite in the design of pokemon for Kha'Zix to kinda play off him looking like Scyther.  So I shrunk down a scaled image, created a black outline and made a palette.  I think I made my palette too complex for such a small sprite and I might go back and simplify the sprite a bit but here he is:

It's not very big, it's only an 80x80 sprite, but I wanted him to be the evolved form of:

Even though my spriting style is a bit more complex than Scyther.

Here is the image I based my sprite off of as well:

It took a few hours but it was enjoyable.  I like pixel art a lot and it was fun to scale the big picture down and try and make it look half decent.  I think I honestly need to tone down my palette into about half as many colors and rework him, but for now he'll do.

Enjoy!

~WakeskaterX~

[Design] League of Legends Comic Contest

Comic Contest:

Well I may be no artist, but I decided to make a submission to the League of Legends Comic Contest found here:

http://na.leagueoflegends.com/board/showthread.php?p=27788393

I did the drawing in pen, sharpie marker and colored pencil, then added some effects in Paint.NET.

I'm not skilled enough to do it all in Paint.NET/Photoshop without spending weeks examining pixel by pixel  (this is why i like pixel art better)  so that's why it's of questionable quality.

Oh well, whether or not I win doesn't matter much, but I had fun making it :).

Here is  my comic:

As you can see, there are surely many other artists who exceed me in ability.

But maybe it'll cause a chuckle.

Well that's it for now, I got  myself a C# Book and have been studying up on C# to hone my programming ability.  I'll probably end up using C# with my next project, which I have started planning, which will be developed in Unity3d.

Cheers,
~WakeskaterX~