Jump to content

  • Log in with Facebook Log in with Twitter Log In with Steam Log In with Google      Sign In   
  • Create Account
Photo

Project Avalon: A Grid-based Citybuilder (now with a name)

avalon city simulator
170 replies to this topic

#1 Convergence

Convergence
  • LocationNetherlands
Offline

Posted 13 December 2013 - 04:56 AM

*
POPULAR

 
gvSLXfr.jpg
 
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.
 
Still in the middle of development, especially the simulation part. 
 
 
Edit: First attempt at a soundless gameplay video 
 
 
 
 
Here's some screenshots (click for large):
1aIgjyv.jpg
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 ;))
 
oA5de2d.jpg
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...)
 
IDEseMN.jpg
h2JXWtI.jpg
J0pUIcT.jpg
 
There's also a night mode:
1zXUppT.jpg
dgpzE7Y.jpg
 
 
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...
ulTYREC.jpg
 
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.


#2 NielsC007

NielsC007
  • You can call me Niels.
  • LocationOegstgeest. South-Holland, The Netherlands
Awards
  
Offline

Posted 13 December 2013 - 12:21 PM

Just out of curiousity, how big are the maps?



#3 MandelSoft

MandelSoft
  • 0xBADB57F1
  • LocationZoetermeer, the Netherlands
Awards
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
Offline

Posted 13 December 2013 - 12:27 PM

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...

Read the Readme or drown in bugs and glitches, the choice is yours...

My (mostly) transit BATs and Mods
Visit my CJ, Schellingen-Stadt!



ms_signature_animated_00.gif.gif


#4 Convergence

Convergence
  • LocationNetherlands
Offline

Posted 13 December 2013 - 12:38 PM

Just out of curiousity, how big are the maps?

 

As of now, they are unlimited size. 

 

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...

 

Thank you :)



#5 catty-cb

catty-cb
  • LocationNew Zealand
Offline

Posted 13 December 2013 - 12:40 PM

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



#6 smf_16

smf_16
  • LocationFlanders, Belgium
Offline

Posted 13 December 2013 - 02:04 PM

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?



#7 GMT

GMT
  • Member
  • Simtrop Enthusiast

  • 4,507 posts
Offline

Posted 13 December 2013 - 02:18 PM

not bad not bad at all.

you got yourself about 99% farther than most of these projects.

I really hope you stay at it!


Posted Image


#8 Convergence

Convergence
  • LocationNetherlands
Offline

Posted 13 December 2013 - 02:30 PM

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 :)

 

not bad not bad at all.

you got yourself about 99% farther than most of these projects.

I really hope you stay at it!

Thank you, me too!



#9 pcwhiz24

pcwhiz24
Offline

Posted 13 December 2013 - 02:43 PM

I like it, this is already better than SimCity 2013 :)


Custom Built Computers: The Beast: Intel i7-2700K OC 4.8Ghz, 2X GTX 670 2GB in SLI, 16 GB DDR3 2133mhz, ASROCK FATAL1TY PRO P67, 256 GB SSD + 1 TB 7200rpm + 2 TB 5900rpm + 500 GB 7200 rpm HDD (+ 1 TB Backup WD Drive) + Triple monitor setup (3X 1920x1080) Nvidia Surround vision 2nd Computer: Son of Beast (little Beast): AMD 5000+ 2.2 GHz , GTX 550 TI, 2 GB DDR2 RAM, 250 GB 7200rpm HDD, 1280x1024 screen (or can be hooked to 1920x1080 Plasma TV) Laptop: ASUS G72GX: Intel Core2duo 2.52 GHz, 6 GB DDR2 RAM, GTX 260M, 500 GB 5400rpm drive, 1600x900 17'3 screen Old computer: 1 GB SDDR Ram, Nvidia 8300GT, or ATI 330/550X, AMD 3500+ 2.1 GHz, 200 GB IDE Hard Drive, 1024x768 screen Netbook: 1.8Ghz Intel Atom, GMA 3100 Graphics, 1024x600 screen, no hard drive currently installed. (Toshiba NB305-440BL)

#10 smf_16

smf_16
  • LocationFlanders, Belgium
Offline

Posted 13 December 2013 - 06:09 PM

 

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.  :)



#11 heat33330

heat33330
  • LocationIreland
Offline

Posted 13 December 2013 - 08:46 PM

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.



#12 Darth Apple

Darth Apple
  • LocationBetween the moon and mars
Awards
  
Offline

Posted 13 December 2013 - 09:13 PM

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. :D



#13 Convergence

Convergence
  • LocationNetherlands
Offline

Posted 13 December 2013 - 11:32 PM

I like it, this is already better than SimCity 2013 :)

Hehe, I'm sure SImcity 2013 is way more powerful than this ;)

 

 

 

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. :D

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



#14 КaZZ

КaZZ
Offline

Posted 14 December 2013 - 05:38 AM

looks awesome, i really wish u good luck with it and hope see final product one day



#15 Mark_Kochan

Mark_Kochan
  • AtomiusImperator
  • LocationSussex, England
Offline

Posted 14 December 2013 - 07:15 AM

Certainly looks better than my project. I am also going the 2.5D route, so the graphics will likely be similar in style to yours, and also I am using a grid based system I gave up on curvy roads.


Best signature ever

#16 Convergence

Convergence
  • LocationNetherlands
Offline

Posted 14 December 2013 - 01:59 PM

 

I've been working on some industrial art last few days.

 

qMflDkH.jpg

 



looks awesome, i really wish u good luck with it and hope see final product one day

thanks

 



Certainly looks better than my project. I am also going the 2.5D route, so the graphics will likely be similar in style to yours, and also I am using a grid based system I gave up on curvy roads.

Do you have any screenshots of your project?



#17 A Nonny Moose

A Nonny Moose
  • You've got to be kidding!
  • LocationHensall, Ontario, Canada
Awards
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
Offline

Posted 14 December 2013 - 07:06 PM

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.


 

 

Small, Fast and Free: Linux is the program for me.
The teacher opens the door but the student must enter himself. - Ancient Chinese Saying
Music expresses that which cannot be put into words and that which cannot remain silent. -- Victor Hugo
I haven't lost my mind -- it's backed up on tape somewhere.
JohnNewSig.gif
"We have met the enemy, and he is us" - Walt Kelly

Come join us at the Moose Factory


#18 Mark_Kochan

Mark_Kochan
  • AtomiusImperator
  • LocationSussex, England
Offline

Posted 15 December 2013 - 02:25 AM

1456776_538173102941242_2130592387_n.jpg

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


Best signature ever

#19 Convergence

Convergence
  • LocationNetherlands
Offline

Posted 15 December 2013 - 07:10 AM

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?



#20 tmorgan96

tmorgan96
Offline

Posted 15 December 2013 - 09:11 PM

Looks fantastic. This is something I will be keeping my eye on.



#21 mattmontgomer16

mattmontgomer16
  • LocationSouthwest MI
Offline

Posted 15 December 2013 - 09:51 PM

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?



#22 Convergence

Convergence
  • LocationNetherlands
Offline

Posted 16 December 2013 - 05:57 AM

Looks fantastic. This is something I will be keeping my eye on.

thanks

 

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.



#23 MandelSoft

MandelSoft
  • 0xBADB57F1
  • LocationZoetermeer, the Netherlands
Awards
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
Offline

Posted 16 December 2013 - 06:52 AM

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

Read the Readme or drown in bugs and glitches, the choice is yours...

My (mostly) transit BATs and Mods
Visit my CJ, Schellingen-Stadt!



ms_signature_animated_00.gif.gif


#24 GeometryMath Algebra

GeometryMath Algebra
  • Philippines. (amidoinitrite???)
  • LocationBlue Marble
Offline

Posted 16 December 2013 - 08:46 AM

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? :whatevs:)

x(x-10)=7[sin(666x]


The Network Addon Mod for SC13 is now out! Download here.


#25 Convergence

Convergence
  • LocationNetherlands
Offline

Posted 16 December 2013 - 09:18 AM

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? :whatevs:)

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:

 

OAnH8LP.png

(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.



#26 Mark_Kochan

Mark_Kochan
  • AtomiusImperator
  • LocationSussex, England
Offline

Posted 16 December 2013 - 10:44 AM

 

 

...

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.


Best signature ever

#27 Delecto

Delecto
  • LocationSwitzerland
Awards
  
Offline

Posted 16 December 2013 - 11:11 AM

This look really good:golly: 

 

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


-My BAT Thread-   -My BATs on the STEX-

 

u2kl.jpg

 

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


#28 OcramSeattle

OcramSeattle
  • LocationGreater Seattle Area
Offline

Posted 16 December 2013 - 01:34 PM

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

The above quotes describe my philosophy and the below links should help you when I don't.
The best place for Cities XL info is at The Cities XL Wiki!
Problems with Cities XL? Go to Cities XL Technical Issues or XLNation.net
Problems with SimCity 4? Go to SimCity 4 Technical Issues but no sections with CXL in their titles.
Want to learn more about game-play or other things not in the FAQ's of the above forums? Go to The Simtropolis Omnibus of Knowledge.
Please don't post confused threads in the wrong place.

#29 Convergence

Convergence
  • LocationNetherlands
Offline

Posted 16 December 2013 - 02:39 PM

 

 

 

...

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.  :golly:

 

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.


--Ocram

Thank you :)



#30 longtimepcgamer

longtimepcgamer
  • LocationNew Hampshire, USA
Offline

Posted 17 December 2013 - 11:04 AM

Wow.....I really like it so far......count me in!!!







Also tagged with one or more of these keywords: avalon, city simulator

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users