As a hobby I'm making a city simulation browsergame. Because I'm just working on it on my own I have decided to do a old-fashioned grid-based simulator using sprites. All is made in HTML, CSS, Javascript with help of transparent PNGs which I design in a 3D application.

The game has the known RCI zoning including agriculture. The city will have needs for power, water and to be added sewage disposal, and citizens will need to find a job, have services nearby like grocery, pharmacy, shopping, schools, entertainment.

I'm still thinking if the city will need to be self-sufficient, in that for example you can only build a Clothes factory if you have zoned enough cotton farms, mass-place roads if you have a concrete factory with asphalt production, pharmacy if you have a pharmaceutical plant, etc.

While I'm just making it for fun, I'm curious to know if there is still interest in this kind of city simulation game, or that only full-fledged 3D games are accepted nowadays.

The big advantage of using sprites instead of 3D is nearly-unlimited detail without loss of performance. The style so far is, as you can see, very green with lots of trees, which are usually pretty expensive to render in 3D in big numbers. (Yes, the house direction is incorrect in this screenshot )

As of now the streets are still empty, I'm still thinking of html/css/js options on how to populate them. It shouldn't be impossible. Unfortunately one of the drawbacks of grid-based building is the absence of curvy roads (would be a big PITA to make that in sprites anyway...)

There's also a night mode:

One of the features will be modular buildings (which I found out the new Simcity also has). As example I have a modular international airport, seen at night in this screen. Concourses can be dragged from the terminal plaza to which gates can be attached, just like housing is attached to roads. Other modular buildings will be shopping malls, medical centers, universities other public transportation buildings...

Since this is all html/css/javascript, it should be easily moddable (both in artwork and simulation) by anyone having the skills and desire to do so.

I've only been working on it for a month or two sofar, so its still way too early to release any playable version, hehe. At any rate, its immensely fun to build a city simulator: to look up all the individual buildings on Google to find out how they work, what they look like, what their dimensions are, etc. etc. and then to recreate them in 3D and in the simulator.

So far, I like what I see here! Good that you went for the 2.5D approach, since this offers you a lot of comfort when it comes to setting up the render engine of this game. Furthermore, your graphics do have some sort of special feeling to it, I like that...

So far, I like what I see here! Good that you went for the 2.5D approach, since this offers you a lot of comfort when it comes to setting up the render engine of this game. Furthermore, your graphics do have some sort of special feeling to it, I like that...

That looks really nice! Since I too do know a lot about HTML, CSS and Javascript (as well as PHP actually) and have quite some experience with it, I have to ask: which JavaScript libraries do you use? Or is it all just plain JavaScript? I also really would love to dig into the code to see for myself how it all works, but I assume there is no way to see it yet?

I like the look of it and I've never been too keen on 3D and if you are a "city builder" its more about being able to build a functioning city than anything else

-catty

Thank you for the input

That looks really nice! Since I too do know a lot about HTML, CSS and Javascript (as well as PHP actually) and have quite some experience with it, I have to ask: which JavaScript libraries do you use? Or is it all just plain JavaScript? I also really would love to dig into the code to see for myself how it all works, but I assume there is no way to see it yet?

Thank you In the beginning I used Jquery extensively for DOM manipulation and events, but because of its selector performance I decided to switch to straight javascript mostly, which is much faster for heavy DOM editting like this. Hmm I do prefer to beef up the simulator a bit first

That looks really nice! Since I too do know a lot about HTML, CSS and Javascript (as well as PHP actually) and have quite some experience with it, I have to ask: which JavaScript libraries do you use? Or is it all just plain JavaScript? I also really would love to dig into the code to see for myself how it all works, but I assume there is no way to see it yet?

Thank you In the beginning I used Jquery extensively for DOM manipulation and events, but because of its selector performance I decided to switch to straight javascript mostly, which is much faster for heavy DOM editting like this. Hmm I do prefer to beef up the simulator a bit first

Oh, it looked to me like you were using the HTML5 <canvas> tag.

I understand that you prefer to beef up the simulator a bit first, I was just so excited about somehting like this being possible in HTML5! I regularly think about making an app that enables me to make region-wide SC4 mosaics in google maps style (being able to drag around a whole region) however I never got to this because of time lack...

If I may make a suggestion though, if you ever plan to relaese this as desktop app, take a look at https://github.com/r...ang/node-webkit. It's a bundle of webkit and node.js which allows you to run web apps as desktop apps. I use it everytime I make a desktop app. It also has the benefits that I don't have to worry about browser compatibility anymore, since the browser is included.

Wow! This is incredible! I really hope you keep working on it. As for the 2.5D approach, I don't mind it and in some places I find it better than 3D but then 3D is better than 2.5D in other places but 2.5D is still excellent - especially for simulators.

That looks really nice! Since I too do know a lot about HTML, CSS and Javascript (as well as PHP actually) and have quite some experience with it, I have to ask: which JavaScript libraries do you use? Or is it all just plain JavaScript? I also really would love to dig into the code to see for myself how it all works, but I assume there is no way to see it yet?

Thank you In the beginning I used Jquery extensively for DOM manipulation and events, but because of its selector performance I decided to switch to straight javascript mostly, which is much faster for heavy DOM editting like this. Hmm I do prefer to beef up the simulator a bit first

Oh, it looked to me like you were using the HTML5 <canvas> tag.

I understand that you prefer to beef up the simulator a bit first, I was just so excited about somehting like this being possible in HTML5! I regularly think about making an app that enables me to make region-wide SC4 mosaics in google maps style (being able to drag around a whole region) however I never got to this because of time lack...

If I may make a suggestion though, if you ever plan to relaese this as desktop app, take a look at https://github.com/r...ang/node-webkit. It's a bundle of webkit and node.js which allows you to run web apps as desktop apps. I use it everytime I make a desktop app. It also has the benefits that I don't have to worry about browser compatibility anymore, since the browser is included.

Ah I see. I don't believe I'm using any HTML5 features sofar, but perhaps it will be handy to do things like displaying traffic And thank you for the suggestion, that will definitely be handy.

Wow! This is incredible! I really hope you keep working on it. As for the 2.5D approach, I don't mind it and in some places I find it better than 3D but then 3D is better than 2.5D in other places but 2.5D is still excellent - especially for simulators.

Thank you

I'm honestly very surprised at how much detail you've put together with just Javascript, HTML, and CSS. Have you considered any server side processing with PHP by any chance?

Either way, very nice work! I'll definitely be following and keeping up with this.

Thank you City mutations are sent to php using ajax which stores it in mysql.

That's just delightful. The fact that it runs in a web browser is probably one of the best things about it. I think everyone before me has paid the appropriate set of compliments. Keep up the good work.

Every minute of hate in which one indulges oneself is sixty seconds of happiness lost.Music expresses that which cannot be put into words and that which cannot remain silent. -- Victor HugoI haven't lost my mind -- it's backed up on tape somewhere."We have met the enemy, and he is us"- Walt Kelly

Obviously my game is rather early in development. I made all these sprites myself, but hopefully proper sprites will arise sometime. I like your grid array being composed of smaller tiles. I went for that and for multi-tiled structures, but as can be seen the high school sprite was clipped. I think my depth =-y code isn't working there for some reason, possibly the fact the game is computed topdown but shown in dimetric mode here

That's just delightful. The fact that it runs in a web browser is probably one of the best things about it. I think everyone before me has paid the appropriate set of compliments. Keep up the good work.

Thanks Yes it should be very easy to just copy links to any location within your city and share them anywhere. Also everyone else can load your city and pan through it without installing anything.

Obviously my game is rather early in development. I made all these sprites myself, but hopefully proper sprites will arise sometime. I like your grid array being composed of smaller tiles. I went for that and for multi-tiled structures, but as can be seen the high school sprite was clipped. I think my depth =-y code isn't working there for some reason, possibly the fact the game is computed topdown but shown in dimetric mode here

Thanks for sharing Hmm, I don't see any clipped building in that image. What are you using to make those sprites?

I hope to see a lot more of this, it looks great and I think there is so much you can do with it.
Is there any water included yet or terrain features?

I tried a water texture, but wasn't satisfied with how it looked yet (too cartoony: http://i.imgur.com/qo6kqE0.jpg). But its definitely something that will be implemented, as most real-life cities are built near water.

As far as other terrain features I'm still thinking about how to do it.

For the water texture, try to make it more dark and desaturated. De-saturation usually works for making things look more realistic.

Yes you're right I was trying for a tropical look here (to match the palm trees), where the color of the water really is like this.

That's nice! SimCity 4 still outpowers this, but this is 100000000000000000x better than SimCity (2013)!

(P.S. Are the highways modular, just like SC4's RealHighway Mod? )

Hmm, I don't have any experience with Simcity4's mods, so I'm not sure how modular those are. Are like manually draggable flyovers to create your own custom interchanges?

For now I just have ploppable interchanges and ramps, like so:

(don't mind the incorrect lane textures).

I'm planning to do various types of interchanges so there will be at least soms options like diamond interchange (shown here), cloverleaf interchange, half clover, and also various ramps i don't know the names of.

I am glad that you have progressed so far. Keep up the great work! Although I won't play your game (too busy with other stuff), I want you to know that there is support for the idea.

--Ocram

"Always do your best and you will always be better than the best in my eyes."--found on the Internet, modified by me.
"Words are words, explanations are explanations, but only performances matter."--forwarded from email, unmodified
"Ocram's Razor: Everything Ocram posts is as long winded and complex as possible, also prone to self disclosure. Opposite of Occam's Razor."--Paraphrased and reformatted by me

Thanks for sharing Hmm, I don't see any clipped building in that image. What are you using to make those sprites?

Game Maker's sprite editor. If you look hard enough the high school is clipped by the road tile west of it.

Oh right, hehe. Yeah I have some difficulty sometimes too with layering. Next I'll need to add a separate traffic layer for all roads, but then the light poles closer need to be in front and the light poles opposite need to be behind the cars. So I'm afraid I will be looking at 3 layers for a single road tile.

This look really good.

Can you give us some information on the 3D apps you used?

Thanks I am using 3D Studio Max. The trees are a plugin, and the vehicles are downloaded.

I am glad that you have progressed so far. Keep up the great work! Although I won't play your game (too busy with other stuff), I want you to know that there is support for the idea.