Displaying NPCs/Monsters in Browser-based Games

Browser based games mostly text based...

http://portal.battleon.com
http://armorgames.com
http://newgrounds.com
http://Kongregate.com
http://www.nplay.com/BeGone

I think that's a misconception.

I think he's posting from 2004.

Guys, I think it's pretty obvious that he's talking about a different type of browser-based game, that is typically more stat-based and uses only static images or basic animation, typically with simpler turn-based game-play -- although sometimes very complex and in-depth levels of strategy. Given the number of people trying to tackle high-content projects that will never see the light of day I think it's probably a smart decision as well -- these games can still be very popular, but have a drastically reduced art-production burden. Look at the link he provided to Urban Dead for an example.


I'd go with superimposing the monster images on to the various location backgrounds if you want to try to display them "in context" without going to a separate battle screen. It's worked well for other games of similar type (such as your example of Defender's Quest), and is relatively easy to do without increasing your art budget.


Alternatively, as the others have hinted at, you could actually go for a more graphical game -- technologies such as the Flash plugin or even HTML5 are now more than capable of doing this, but obviously you'd be creating more work for yourself and would need to adapt the game play to suit.

Hi Legendre, actually i'm working too on a project for a browsed based game. I'm still working on filtering all the ideas i got in my mind and choose the one that are easy, funny and at the same time make the game more interesting and idfferent than others browser game.
At that's the hard part of all the project, since i know i can do it, but it's one of my first project so it will take time,patience and a lot of personal will!

I perfectly understand your concern, since i want more graphic or effect in my browser game, but just think how much time it's needed for an effect, like the hero moving during combat, it's a lot complex and painfull to code in Php/jQuery/Ajax... I don't say is impossible, is just realy complex.

In my game the combat will be turn based (like FF7 if u know it) with a max of 5 people in a party, i already made the "sync" of the diferent users in the same party, battling against an enemy. But i made it with just plain text, right now i'm thinking on how to put more "graphic" and "effect" in it, to make it more interesting and less boring.... like "skill effect" on the monster, the slash of the sword or the block of the shield. I was thinking of putting hero character avatar and enemy avatar to make it more "realistic" and not just plain text.

About the monster.. i was thinking to using a map to let the player move around the world and encounter enemy, so i could just put mosnter around the map, near the place where they should be, for a standard browser game, as i udnerstand u want to make a "standard" one, i don't know. Placing monster picture around the design of the website surely will help to identify the monster where the player is but wont it make the design too much "full of thigns"?
I like a lot minimal website, because they are clear, immediate and with basic effect they are cool. But i know that making "minimal" a browser game, is like wanting to make a chocolate cake, with realy little of chocolate :/ .. still i don't think that placing too much things around the design will help the player to understand at first glance and visit in the website what he must do.

I'm not saying you shouldn't put them, is just that if u do it u should it as it wont affect too much the design and make the "first glance" more complicated. There are a lot of people (myself too) that don't even brother to surf all the website, if that is too full of things that make it unclear at first glance.

I thought too to start learning HTML5 new technology to make game that would be playable everywhere with everything, but it would take a lot of time and would make a game that is not what i want to do: a browser game!
Flash, for me, is out for all options, since i think it will be useless in some years thanks to HTML5 too!

I think he's posting from 2004.

Browser based games mostly text based...
http://portal.battleon.com
http://armorgames.com
http://newgrounds.com
http://Kongregate.com
http://www.nplay.com/BeGone
I think that's a misconception.

Sorry guys I should have specified that I am referring to text-based PBBGs (persistent browser-based games). I have in fact developed games in Adobe Flash for several years.

Edited the OP to better reflect this. Cheers.

Alternatively, as the others have hinted at, you could actually go for a more graphical game -- technologies such as the Flash plugin or even HTML5 are now more than capable of doing this, but obviously you'd be creating more work for yourself and would need to adapt the game play to suit.

I have another project going that is a graphic browser-based game that uses a Javascript game engine client-side to generate the graphics. In fact, the log-in system, chat rooms, multiplayer networking (done using websockets via node.js) and actual game engine (moving character around in the game world, attacking etc) are done.

The problem is, I will have to commission concept art, put together a style guide, commission actual art, and then put it all together and tinker with the graphic aspects continually. i.e. Play the role of "Art Director" on top of design, programming, business aspects.

Its not "hard" to get the animations done. There are many freelance artists for hire on places like Deviant Art, and I have a few thousand dollars in art budget. It will take take a long time, and a lot of effort, to get the level of "artistic polish" I want for the game. Probably 6 months or longer! (doing this as a hobby) I was hoping that if I make a less graphics intensive game, I can actually finish and release something much faster. Then, go back to working on the graphical game using the art assets, code, infrastructure and experience acquired.

Starting this thread and reading your input helped quite a bit. I forgot about the "Defender's Quest" approach of superimposing characters onto the background. Thanks!

but just think how much time it's needed for an effect, like the hero moving during combat, it's a lot complex and painfull to code in Php/jQuery/Ajax... I don't say is impossible, is just realy complex.

This is actually quite easy to do in HTML5/Javascript. You just need to shift the location of the sprite on the HTML5 canvas and load the appropriate "walking" images, or use a Javscript game engine that has everything built in. (pm me if you need more directions, I can link you to the tutorials/code)

Like I said in my reply to jbadams, the programming is not the hard part, the biggest hurdle is all the time and effort that you will have to spend playing the role of "art director".

P.S.
My day job is scientific computing, so I apologize if I trivialized the programming too much.

This is actually quite easy to do in HTML5/Javascript. You just need to shift the location of the sprite on the HTML5 canvas and load the appropriate "walking" images, or use a Javscript game engine that has everything built in. (pm me if you need more directions, I can link you to the tutorials/code)

Like I said in my reply to jbadams, the programming is not the hard part, the biggest hurdle is all the time and effort that you will have to spend playing the role of "art director".

P.S.
My day job is scientific computing, so I apologize if I trivialized the programming too much.

Yea i know that you can do iy with HTML5 ad jQuery, but it would take time to study it and it wont end there, i would need to study more for other things like collision and everything else that seem easy, but at the end it would take a lot of time to learn and than to put on action. I hate made engine, i like to code myself all what i need, too if it take a lot of more time.

Since i'm working for a "text" browser game, i don't need 2d or 3d graphic. In a future i will surely study HTML5 and all the technology to make an online game with 2d or 3d graphic, but right now, since i do it in my free time and with the knowledge i made in 7 years of study and practice, i will use jquery/ajax and php to make good effect that wont burden the weight of the design and of the website!
[I accept any suggestion, since i'm a newbye as designer/game programmer, but right now i focus on strengthen my knowledge then expand my 'universe']

Actualy i know that the design is an hard part of it, since i can code all what i want, but without any art designer, i wont be able to make the website looking good, neither the game! But i think that the programming is the more harsh part of all the "Game Development".

I say that because you need to know what u are doing, u need to know diferent way to make the same things, u need to know to secure the code, to realize the things u planned and everytinhg is connected to the programmer.. why?
Well that's because if u have to put a sprite there, u need to know how to place it there.. if u have to change an algoritm u need to know where and how to change it! and so on :3

No worry, i'm a Web Programmer but still new in this world (22 years old here), i've stuyed a lot (since i were 15 y.o.) and i think the programming is the main thing, without it nothing realy matter since u won't even need an art director without a programmer to meke the game :3

Yea i know that you can do iy with HTML5 ad jQuery, but it would take time to study it and it wont end there, i would need to study more for other things like collision and everything else that seem easy, but at the end it would take a lot of time to learn and than to put on action. I hate made engine, i like to code myself all what i need, too if it take a lot of more time.

It will just take a few days to learn how to do movement and collision in a Javscript game engine like CraftyJS, MelonJS etc (google for "javascript game engine"). They are designed to be user friendly.

Part of software development is knowing when to use "engines" (libraries/modules/packages etc) to speed up development time. For example, jQuery is an "engine" too. It would be an utter waste of time (and delay development by several years) to write your own "jQuery" from scratch. Or develop your own HTML5 server from scratch instead of using something like node.js.

Remember: we're game developers, not software engineers! (even if we are software engineers, it takes many programmers years of work to produce something like jQuery or node.js, and we're just one man)

Actualy i know that the design is an hard part of it, since i can code all what i want, but without any art designer, i wont be able to make the website looking good, neither the game! But i think that the programming is the more harsh part of all the "Game Development".

I used to think programming is the harshest part of Game Development. But after acquiring quite a bit of programming skills, I now think art direction (commissioning and managing art) is harsher.

Just my humble opinion. Good luck! ^__^

Feel free to check out browserquest, or at least the video walkthrough of it. This is an HTML5 game that uses websockets to communicate in a manner that allows for some interesting features in a browser based format.

Feel free to check out browserquest, or at least the video walkthrough of it. This is an HTML5 game that uses websockets to communicate in a manner that allows for some interesting features in a browser based format.

I know about browserquest. And I have already programmed something similar in Javascript using node.js (i.e. HTML5 + websockets).

Unfortunately, the amount of work required to finish up lead me to put it on hold to try and finish something simpler first. In particular, to produce art assets on the same level of polish as browserquest will require many months of dedicated effort.

I am thinking of doing something like what indie/low-budget Japanese RPGs do: superimposing characters over a fixed background. E.g. http://www.blisteredthumbs.net/wp-content/uploads/2012/04/22.jpg. Recettear did it the same way for its NPC conversations: http://www.rpgamer.com/games/other/pc/recettear/screens/recettear5.jpg.