“Animating your own game” continues… I’ve been studying jQuery for a few hours now and it’s getting quite late. It was no surprise that things did not go quite as I intended. Not much to say here but I thought it might be a good idea to record my thoughts while I’m at it.
I feel hopeless and exhausted by the endless flood of information. How can I EVER get hold of all of this? I’ve also been studying some HTML5 game engines like PixiJS but there’s something repulsive about them. I’ve never liked closed software or abstractions, but here I am facing a decision. Almost every site where I’ve read about game design refers to using a ready game library for any given platform.
An engine from scratch?
I mean I hate the idea that I’m learning a syntax that might drastically change in the near future. I fear that at some point I just run into some severe flaws in the engine and end up in having to change to another platform with completely different codebase and syntax. I’m thinking if that is a risk worth taking.
Another problem with ready-made game engines (like Unity) is that I don’t really know what happens under the hood. Of course I don’t understand all about my car either but I still know how to drive one, right? But, I’m not interested in building a car. I’m interested in trying to build a game for myself from which I can say I did it. As a bonus aspect I’m also trying to learn some game project management skills here. I really want to understand why things happen and are done in games the way they do.
Is it a PHP or a jQuery game?
All I really wanted was to have some modest animation in my game but as it turns out, it’s a real mess out there. One the biggest mistakes I’ve ever made was to underestimate the power and importance of JavaScript. I thought it would only be a curiosity and would soon be displaced by some more powerful programming language. As it turns out, I was horribly wrong and now I just have to painfully go down that road.
I was thinking of switching to use Java, but let’s not talk about that either. Web coding is what I know best. So that is the one I’m going to stick for now to actually make something happen. I started making some serious tests with jQuery’s animate() functions and I soon found out that I cannot use animation queues with multiple objects. There are a few ways to go around that. Here you can find a good discussion of animating multiple elements sequentially with jQuery. The syntax I need will look horrible anyway if I end up using jQuery for my game project.
Javascript is run on client side so you have to be careful when sanitizing your input. I have to start learning some AJAX too. But that’s actually something I thought would be a necessity when building powerful web applications anyway. It has become clear to me that building a game is not that simple. The deeper I dig into the world of would-be game mechanics, the more questions arise. I also have to remind myself that it’s only a prototype and I should not fall in love too quickly with it.
Here’s some code I’ve been playing with (currently I go with the fallbacks…):
$( "#movehero" ).click(function() {
$('#hero1')
.animate({ left: "-=50", top: "-=50" }, 350)
.animate({ left: "+=50", top: "+=50" }, 350, function() {
$('#hero1').animate({ left: "+=50", top: "+=50" }, 350, function() {
$('#monster1').animate({ left: "+=50", top: "+=50" }, 350, function() {
// Create a monster, doodad or effect...
jQuery('<div/>', {
id: 'monster3',
class: 'griditem',
style: 'top: 150px; left: 150px;',
text: 'M3'
}).appendTo( "#testgrid" ).hide().fadeIn("slow");
$('#monster2').slideUp(350, function() {});
});
});
});
});
Heavy code refactoring ahead
I started my game coding from so basic aspects that it’s going to require some heavy additions to my code just to get those animations going. But I guess that’s just the way it goes. It took me a long time even to plan all of this stuff. Currently my game uses a HTML grid of divs that hold information. When I add the animation, there has to be own divs for the stuff that animates. This is quite a game changer. It would help if I had some sort of a plan what I’m actually trying to build!
Some questions to be answered:
- What if I want a spell “Line of Fire” that animates like 4 squares. If I make a new divs with jQuery that spawn and disappear accordingly, should there be some information in the grid div about that?
- The problem: What if I spawn something solid that stays on for the next ground? The grid has to have information about that solid object (like a rock or something) in order to the collision detection etc. to work! The relation between the UI and the core has to be thought out well!
