I started on a html5 sim city clone over the weekend. When I went looking for art assets I found OGA and the LPC. I am surprised that I had not heard of the LPC before this. I am posting this here since I thought it might be good to make myself accountable to ship the game. Plus LPC is something I would like to support.
General
Clonecity is of course a tentitive name. Based on the art I am using from Uknown Horizions I cannot call it 'city' with a straight face.
The git repo is here: https://bitbucket.org/ddressler/clonecity/
It can be played here: http://danieru.com/clonecity/
Game Design
I should maybe call this section 'gameplay compromises' instead. My only two goals are to make a quick fun game & ship. To that end the code and game play is messy so that I can iterate.
The game will have an arcade feel. I'm too lazy to add roads, power distropution, and polution, so it will not be a true sim city clone. You will not be able to save. That should force me to work on rapid gameplay.
Game feedback will occur through messages above buildings. For example: "We are starving", "We feel poor", "Died of starvation", "=)", "We need more workers", "We need more stock".
When a building goes backrupt or starves it will turn to rubble. I may not let the player clear rubble, I have not decided on that.
Code
The game engine is straight html5 in the DOM.
Earlier versions used jquery but I have since switched to zepto. Thanks to css3 I had only used jquery for DOM manipulation so the extra parsing weight was un-justified.
By the end of the LPC coding stage I intend to have a android build available.
I will add a proper credit screen when I add the start menu, until then the credits are in the readme.
Todo
Rewrite Economy to be dynamic so that it reaches a proper equilibrium.
When LPC art stage is done:
You need to make the repository public. It is not accessible right now.
Do you have a goal you plan to reach or is it a add-stuff-as-long-as-its-fun project? :)
If you would like to polish it, I have a few suggestions:
1. Make the buttons equal-colored but give them hover/active/passive states.
2. Have status/action information above buildings (in a floatingly-disappearing kind of way), for example when they generate something or are in need of something. This is probably the best way to give players information about required action.
It feels a bit strange to place diagonal-grid-design-buildings on a vertical/horizontal grid, especially without having a preview of where a building will appear after clicking. The buildings are available as 3d models, so theoretically it would be possible to render them in a different perspective. (probably quite some work, unless you're a blender pro though) ^^
Thank you qubodup! I had no idea bitbucket defaulted to private thank you for pointing this out. That would have been a nasty bug.
While-it-is-fun is my exact approach. I hope that at the end of things a fun game appears.
The orthogonal vs isometric issue is the exact reason why I am so excited about LPC. All the current art of OGA that would work is isometric and I would like to avoid writing isometric support.
If any artists are reading: a farm would be very useful and I think would fit the LPC style very well.
I manually rendered a farm from UH in top down
and 45° view.
Curiosity satisfied. :)
Bahaha! That's perfect.
I have a basic messaging system going. I need to style the messages then I'll add the farm plot. Today is my 'work on game' day.
I'll report back when I have both tasks done.
The farm is by "dauerflucher" and licensed under CC-BY-SA 3.0, these renders fall under the same license.
I made them using the blend files at https://github.com/unknown-horizons/gfx and if you're not afraid of blender (I'm a noob but I got the hang of moving through the 3d space there to some degree at least) you can do too ;)
The messages are done and fading. It turns out that css animations are very painful to debug. With that said I'm glad I slogged through it, I have been meaning to learn animations for a while.
The farms are added. They go bankrupt in record time which just goes to highlight that I need to rewrite the economy.I've attached an example of this from earlier.
I need to thank you again qubodup, you may not think it was much to render it out in blender but I expect you saved me an hour or two. I have not used blender in years and I am sure they have changed the UI twice in that time.
I should warn potential players: I've just added a "We are going to go bankrupt" message which fires every game tick.
Thus it spams the DOM creating a new div every 100ms. Depending on how fast things are lossing money this could mean thousands of DOM elements. I expect this will crash mobile browsers and slow desktops. I need to add timeouts to the messaging system, just not tonight.
Good news, the game is safe to play. Messages no longer spam the DOM. As well I have removed the cliff at the bottom of the screen. All it did was take up screen space.
1. I don't understand at all why buildings go bancrupt.
2. Nice speech bubbles. But they overlay buildings, hiding them completely, I recommend minimizing the text ("we are going bankrupt" -> "going bankrupt") and moving it higher, so you can still see the building and possibly making it transarent.
3. Having the HUD at the top is nice, it being width-flexible seems like a cool idea too! The line behind the draggable widget is hard to see.
4. If the :) :| :( icon is only related to the tax-%, it can be moved to the widget where you set the taxes - there's enough room. The meanig, or rather the implications, of the different faces is unclear though.
Thank you very much, this is great feedback.
1. This is a very good point. I need to find an elegant way to express the economic model to the player without requiring they read any instructions.
One way I am thinking of doing it is to use the messaging system. When a house does not have work it will complain in a message. If a factory/shop does not have workers it will complain. Likewise if a shop does not have stock or customers then more messages.
Another way to signal to the player would be through stats. For instance an unemployment rate panel or a GDP panel. Even if the player is a six year old and does not know what the stats mean they will see the numbers and how they change. They should also notice that a high unemployment rate coincides with starving houses.
2. That is a good idea. I can also reduce the text size and the padding.
3. I'll change the background colour on the tax panel. I also have to add a polyfill since the html5 slider form is not supported in firefox.
4. You've guessed it right, the smily faces only relate to the tax rate. At present there is no effect on the game world. What I want to do after the economy rewrite is make happy-ness a attribute of each house. Houses will then occasionally send a message to show their happyness. Thus the global smile widget is a debugging hold over as is the demand panel.
On the topic of the demand panel: it is only useful to see the profit levels for the buildings which is nice for debugging but I will remove it in time.
You could reduce the size of the status messages even more by simply using icons. E.g. if the building is going bancrupt, display only the coin icon followed by a question mark inside the speech bubble. Or if the building needs more workers, display an icon showing a small person followed by a question mark. This basicly works for any resources your building might require. It also allows one building to show several status messages.
To show the urgency of the message, you could change the background color of the speech bubble: A message of critical urgency might be dark red, while a less urgent message might be white.
That could work. I think the messaging system could support that without much modification. It would also make i18n much easier. I will have to experiment on monday when I have some free time.
Well it would appear that life has caught up with me. On friday a google recruiter got back to me about an internship application I sent in two weeks ago. Looks like I am going to be spending my free time over the next two weeks in my algo book before the interview.
Once that is done with I intend to give clonecity some proper attention. A fun html5 city builder is something I can get excited about.
Good luck! Let us know if you turn out making open source games for google ;) (I know at least one person did: http://replicaisland.blogspot.de/ )
Well I'm back and excited for the competition. The google interview was fun but I did not get an internship, I'll try again for the summer.
So far I have re-styled the controls, added an intro menu plus basic perlin based terrain.
I plan to rewrite the game using crafty.js: http://craftyjs.com/
The current build is playable here: http://danieru.com/clonecity/