Not much here But I got the first stage started! I am using an app called Tiled (Mac or Windows) which is a general purpose map editor that allows for some pretty awesome stuff such as layers and makes setting up the collision detection with MelonJS pretty easy.
Check out Tiled here: http://www.mapeditor.org/
and MelonJS here: http://www.melonjs.org/
So here is something I was struggling with and found a solution that might help other people trying to do the same thing. My goal was to have two keyboard keys do the same thing, in this case move the character in my game. So a player could use W A D S or the arrow keys. My code before was this:
case 40: //down
squid.css('top' , position.top + 50 + 'px')
.removeClass("idle")
.addClass("down");
break;
case 83: // also down
squid.css('top' , position.top + 50 + 'px')
.removeClass("idle")
.addClass("down");
break;
But you can do this instead to help reduce the amount of code, and organize your code better.
case 40:
case 83: //Use either of these keys
squid.css('top' , position.top + 50 + 'px')
.removeClass("idle")
.addClass("down");
break;
I am still trying to figure out how to have key combos like W + D to move up-right or A + S to move down-left so my character can have 8 different directions to move, making it a bit more fluid. If you know how to do this drop me a comment, if I figure it out on my own or have time to google around for it some more, I will post it here.
So I noticed this movie when I was flipping though Netflix and thought I would check it out, it’s called Indie Game The Movie, ( you can check it out here: bit.ly/Km3WmG )
The movie itself was really well made, and followed the surprisingly interesting and emotional stories of some unique game developers. These developers don’t work on 1000-person teams for the big guys like EA or Nintendo, instead they work from home or in small offices with teams of one or two people. They are passionate about their creations, and all of them spoke of some part of themselves going into thier work. The great thing about the Indie realm is that they made a big distinction between where (mainstream)games have gone, and the games they loved as a kid. The all talked about Mario, Megaman, Metroid, Zelda – the classics, and were quite frank when giving their opinions about games like Call of Duty and Halo being crap. The movie stirred up the plan I always had when I was a kid, my first dream career was always a video game developer. I used to draw characters from games I loved, but mostly my own I dreamt up, I even tried to make some of my own games in the past using flash but never got too serious with it. After watching the movie I was inspired again and I started a new side project – a game.
My plan is to create a game using HTML5 Canvas and jQuery/JavaScript that will be playable in browser, or on the iPhone. Another part of this goal is that the game works well, and fits a comfortable button-mapping to an SNES controller. The underlying reason for this project, like with TouchTint, is that in addition to it being a possible source of income, it will be a big learning experience. I don’t yet have a goal of how big or involved the game will be, but I will include a link to the in-progress version so you can check it out if you want, and see how far along I am. Hopefully there will be much more to come as I continue on with this idea!
Day 1
So here is my first post in a series chronicling my process of learning jQuery.
I am using a series of video tutorials from Tuts+, the series is called ’30 Days to Learn jQuery‘ by Jeffrey Way.
I am a visual learner, that is just a fact I have come to recognize about myself, I have to either see or do something to understand it and both will always amplify my chances of retaining what I am learning.
So these blog posts may be redundant if you are going to watch the video series, but guess what? They are more for me anyway! If you get something out of reading and following along that would be awesome, as I do enjoy passing along skills to others, and anything that improves your skills(or mine) will hopefully better the web and thats the point of it all.
Confession time…
For over a year now I have been using it, but I have always seen it as some mystical code snippets that I should never modify or the magic dust might get contaminated. I am a jQuery ‘paster’ and that probably makes real jQuery coders view me as I used to view people back in the Myspace days when they copied and pasted “myspace codes” (HTML and CSS) to change the theme of their page, and wondered why it broke when they combined 50 of them that conflicted. I knew HTML and CSS then, and would laugh at the ridiculous combinations and multiple styles trying to modify the same elements of the page. Thats one major reason I want to dive in and learn jQuery, because I feel ignorant, and I am (when it comes to this subject).
I won’t try to teach a complete beginner here, instead check out Jeffrey Way’s lessons, they are free and awesome, what I will do is post what I learned, no matter how basic from each lesson, so it might be a recap for you, or it might help more to reinforce what you are learning. Either way, here we go lesson one!
jQuery min is for production, meaning I will use this file when the site is complete, and ready to go live, that way it loads faster for the users, and good UX is important.
Production – Compressed, Development – Comments and spacing
The ‘$’ in jQuery code just calls jQuery to do something, its like saying, “hey jQuery do this:” shorthand
What is the DOM? Document Object Model, a representation of your page
recommends sublime text 2 as editor
load jQuery at bottom so it appears to user to have already loaded the page before it loads jQuery
Chrome dev tools shortcut: cmd + opt+ i
Use Google’s CDN because it is more likely to already be cached on a user’s system, reducing load times.