Project Echo - An Online City Role Playing Game

[Octet]

Hello MakeWebGames,

I would like to announce my latest project, a JavaScript game which uses the HTML5 Canvas.

The game doesn't have a name as of yet, so currently resides in a folder on my desktop called 'Project Echo', any suggestions for a name would be greatly appreciated.

The game is a small role playing game, set in a fantasy city to the style of the classic Pokemon gameboy and nintendo games. What I mean by this is that it shall be a 2.5D, 'open world' game which uses the simple art styles and colours that are commonly found in games such as Pokemon and Mario. This is due to my poor artwork skills and because you can easily generate tiles using simplified patterns.

I shall hopefully keep this thread up to data with advancements as I progress with the development for those who are interested.

I am currently in the level design stage.

If anyone has any suggestions, questions or comments then please post and I shall try and incorporate it or answer it!

Thanks

Octet

[srachit]

Will this be a multiplayer game?

[Octet]

Will this be a multiplayer game?

To begin with I am keeping it as a single player game, but in the future there shall be the potential for multiplayer, the ability to battle enemies and a whole bunch of features, however until it has been completed it shall only be a single player game.

[Octet]

Progress Report

I've just been playing around with character movement, the current system uses two maps, one which has black and white (black areas you can't walk in and white areas you can) and the graphic layer is rendered ontop. The idea being that JavaScript picks out the colours from the map below using getImageData which tells it whether or not it can move to that place. The problem is you can sometimes glitch through the walls which I am guessing is because you can fire hundreds of requests a second and the JS can't keep up.

Something I shall need to look into.

[Aventro]

Remember to plan out your project throughly and you will have less problems when deciding to implement multiplayer. Don't just start writing code, begin planning! But I've already spotted some progress, how about you give us a couple of printscreens or records, code snippets (etc) thats a lot more interesting now than you just describing something. Show it, prove it, embrace it!

[Octet]

Thanks for the reminder to slow down Aventro, I was getting carried away a bit there!

[ATTACH=CONFIG]805[/ATTACH]

This screenshot shows the map which is rendered first, it is currently just as an example and for testing, it shall be changed when I come to designing the levels properly. The red square represents a player however in the game this shall be changed, and depending on the movement the sprite shall face this direction.

The difficulty I had previously was checking for collisions, however I believe I have sorted this out now using the following:

 

var canAnimate = true;

function checkCollisions() {

var IMGData = context.getImageData(posX, posY, 15, 15);
var Pixels = IMGData.data;

for (var i = 0; n = Pixels.length, i < n; i += 4) {
	if (Pixels[i] == 0) {
		canAnimate = false;
	}
}
}

 

What this is essentially doing is changing that image into a big array of pixels, each representing an RGB value. I am checking the array for anything in a 15 X 15 at the characters position (the space the character shall occupy if they moved).

If a black pixel is found then it shall not allow the player to become 'animated'.

Inspiration for the level design shall come from 2.5D maps like this one:

[ATTACH=CONFIG]806[/ATTACH]

[srachit]

Which pokemon game is that screenshot from?

[Octet]

Which pokemon game is that screenshot from?

Unfortunately I have no idea. I personally have never played any of the Pokemon games however during some research into other games which use the 2.5D perspective, Pokemon comes up a lot.

The screenshot above is from PhotoBucket however judging by other images in this person's album I am guessing Pokemon Mistic?

I should just clarify that I am not using the sprites included there but instead shall be designing my own.

[Octet]

Ok,

A quick screenshot showing some of my attempted sprite work, it isn't amazing but I think it shall still work. Once the game has been completed I might look into getting an artist to do some of them.

[ATTACH=CONFIG]809[/ATTACH]

The areas where the water meets the land shall be changed, to have a small embankment for a smoother transition, apart from that though... this is the sort of graphics you shall see.

What do you think?

[sniko]

Ok,

A quick screenshot showing some of my attempted sprite work, it isn't amazing but I think it shall still work. Once the game has been completed I might look into getting an artist to do some of them.

[ATTACH=CONFIG]809[/ATTACH]

The areas where the water meets the land shall be changed, to have a small embankment for a smoother transition, apart from that though... this is the sort of graphics you shall see.

What do you think?

Looks very promising!

Is the area pre-created, or randomly created? I'll explain a little more, say you move your character off-screen, is the map that is loaded next loaded from a collection of maps, and selected the specific map from you co-ordinates, or is it generated randomly?

[Octet]

Looks very promising!

Is the area pre-created, or randomly created? I'll explain a little more, say you move your character off-screen, is the map that is loaded next loaded from a collection of maps, and selected the specific map from you co-ordinates, or is it generated randomly?

Thanks,

No, at the moment it isn't randomly generated however that is a feature I might add later on. Currently the tiles are pre-loaded using JavaScript and then it reads through an array of numbers which relate to a tile. The entire map is currently being rendered each time the player moves as this is the easiest thing to do, however depending on performance I might split it into smaller sections and the player shall either travel accross 'zones' or if there is a serious performance issue then I shall have to render only visible tiles then render the next row or column depending on their movement.

Performance shouldn't be too much of an issue however, In the example you can see it is rendering 625 tiles (not all visible). In total the page took 536 ms (processing the mapGen script takes 61ms) with the majority being loading the images, which I shall try and optimise, that is connecting from a remote server in America (pingdom.com).

[Joel]

You should use the http://kineticjs.com/ framework:

 

KineticJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

I developed a Pokemon game using HTML5 and JavaScript a few months ago (learning purposes), without using the framework above. Wasn't easy but now realized there's no need for extra coding when you have that.

Stress test: http://www.html5canvastutorials.com/labs/html5-canvas-interactive-scatter-plot-with-20000-nodes-using-kineticjs/

Good luck doing animating, layering etc without a framework and still maintain performance.

[Octet]

You should use the http://kineticjs.com/ framework:

 

I developed a Pokemon game using HTML5 and JavaScript a few months ago (learning purposes), without using the framework above. Wasn't easy but now realized there's no need for extra coding when you have that.

Stress test: http://www.html5canvastutorials.com/labs/html5-canvas-interactive-scatter-plot-with-20000-nodes-using-kineticjs/

Good luck doing animating, layering etc without a framework and still maintain performance.

 

Thank you for the suggestion however I would much rather not use any third party, 'middleman' libraries if I can help it.

[Sim]

Octet, I would love to help with project. I have experience with these type of projects although not with HTML5, JS as much needed for this. I am programmer with over 15years experience. I am fluent in many languages such as vb, vb.net, php, and knowledgeable in C#, c++. =)

I created some 2d stuff such as this project awhile's ago in vb6 with over 30,000 lines of code.

Add me on msn or skype

Skype: FounderSim

MSN: contact+orpgcreator.com where + is @

I'll be free to help in about a week after I finish this job.

[Octet]

Octet, I would love to help with project. I have experience with these type of projects although not with HTML5, JS as much needed for this. I am programmer with over 15years experience. I am fluent in many languages such as vb, vb.net, php, and knowledgeable in C#, c++. =)

I created some 2d stuff such as this project awhile's ago in vb6 with over 30,000 lines of code.

Add me on msn or skype

Skype: FounderSim

MSN: contact+orpgcreator.com where + is @

I'll be free to help in about a week after I finish this job.

Thank you for the offer however this is a closed project, it is something I would like to do myself however if you are on the forums then I might have some questions in the future :P

[Aventro]

Yes, go go! Looking great so far :)

[srachit]

Heyy, do not mean to hijack your thread but I have a question regarding HTML5,

I did a quick google of html5 tutorials, and on one of the tutorial site it says that you require a good working knowledge of javascript to work with HTML5.

Is this true? I have no knowledge of javascript, but I can program pretty well in C++, Python and I had a look(around 1hr) at PHP the other day, it seems pretty simliar to C++ so I can pick that up quickly aswell.

I am gonna start learning HTML5, just wanted to know if I would face any difficulties in the future due to my lack of knowledge of javascripts.

Thanks :)

[Joel]

Heyy, do not mean to hijack your thread but I have a question regarding HTML5,

I did a quick google of html5 tutorials, and on one of the tutorial site it says that you require a good working knowledge of javascript to work with HTML5.

Is this true? I have no knowledge of javascript, but I can program pretty well in C++, Python and I had a look(around 1hr) at PHP the other day, it seems pretty simliar to C++ so I can pick that up quickly aswell.

I am gonna start learning HTML5, just wanted to know if I would face any difficulties in the future due to my lack of knowledge of javascripts.

Thanks :)

Not all HTML5 elements require JavaScript however to get the full potential out of it you would obviously use JavaScript. Elements such as Canvas require JS because you need some sort of programming to draw graphics, plain HTML will not do this.

Maybe this should become helpful: http://www.w3schools.com/html/html5_intro.asp

I have done many single player games using just JavaScript,HTML5 and CSS3 - nothing more required.

[Octet]

Heyy, do not mean to hijack your thread but I have a question regarding HTML5,

I did a quick google of html5 tutorials, and on one of the tutorial site it says that you require a good working knowledge of javascript to work with HTML5.

Is this true? I have no knowledge of javascript, but I can program pretty well in C++, Python and I had a look(around 1hr) at PHP the other day, it seems pretty simliar to C++ so I can pick that up quickly aswell.

I am gonna start learning HTML5, just wanted to know if I would face any difficulties in the future due to my lack of knowledge of javascripts.

Thanks :)

Hello srachit,

A lot of it does require JavaScript, as mentioned by Joel to unlock the full potential of HTML5.

Personally I haven't done a lot of work with JavaScript but since starting this project I've found it is extremelly easy to pick up, especially if you have a logical mind which you clearly have to be able to code in C++.

I also do a lot of work in PHP, which is more similar to C++ then JavaScript and again you should be able to pick it up with some practice if you have a logical thinking mind.

One thing I would say though, is don't use the w3schools.com website, it is grossly innacurate and you shall pick up a lot of bad habits, their website itself isn't even compliant to W3C standards and they certainly don't endorse it.

[Octet]

Progress Report

2500 tiles can easily be loaded in 400ms, the player can move around smoothly and so performance is looking good.

No pictures for this update, however I am going to begin work on the actual levels now so that the player can walk around what the world shall eventually look like. Once this has been done it is on to seperate zones, such as inside buildings as well as AI and quests.

[srachit]

Is there any specific tutorial that you are following? I'd love it if you could share the link :)

[Octet]

Is there any specific tutorial that you are following? I'd love it if you could share the link :)

Mainly I am following the official documentation from places like Mozilla (https://developer.mozilla.org/en/docs/JavaScript).

I can however recommend a good book called, HTML5 Canvas Cookbook (http://www.html5canvastutorials.com/cookbook/) which has a lot of useful tutorials in it.

I've then adapted these using a mix of previous knowledge, ideas from other websites and official documents to build my current game. If you use the various resources as a guideline, and a starting point you shall soon pick up the language and you can then begin working on your own ideas of how you should do it and how it should work.

Good luck!

[srachit]

Mainly I am following the official documentation from places like Mozilla (https://developer.mozilla.org/en/docs/JavaScript).

I can however recommend a good book called, HTML5 Canvas Cookbook (http://www.html5canvastutorials.com/cookbook/) which has a lot of useful tutorials in it.

I've then adapted these using a mix of previous knowledge, ideas from other websites and official documents to build my current game. If you use the various resources as a guideline, and a starting point you shall soon pick up the language and you can then begin working on your own ideas of how you should do it and how it should work.

Good luck!

Ah I'll have a look at that, mate would it be possible for you to PM me your msn or skype id? I'd like to speak to you further on this topic

[Octet]

Ah I'll have a look at that, mate would it be possible for you to PM me your msn or skype id? I'd like to speak to you further on this topic

Sorry but I would much rather not give out this sort of information, however I shall happily do my best to answer any PMs you send me through this website?