Entire TSO CAS and other things in HTML5

Discussion in 'Other TSO related projects' started by RHY3756547, Sep 30, 2013.

  1. RHY3756547

    RHY3756547 FreeSO Developer Staff Member Moderator

    The logical step forward from my previous project, the character renderer in HTML5. It's rendered entirely using the same UIS script used in the game. Here's a video of it in action:

    http://www.youtube.com/watch?v=_E5vJEao ... e=youtu.be

    In the previous thread I posted I mentioned:

    "The only problem with using this as like an online CAS/sim viewer that retrieves avatars from a game server would be getting storing the game files (1.5GB, pretty big for a web app!) locally."

    And yes, I do have to download, extract and store the entire game locally within the web browser using both chrome's FileSystem API and firefox's IndexedDB. I posted the video because this won't be as easy or convenient to test as the model viewer, but here's the app shell for anyone willing to try it:

    https://dl.dropboxusercontent.com/u/122 ... index.html

    To run this you will need:

    The game's setup .cab files. These are downloaded by the game installer or can be downloaded with Fatbag's GetTSO. The webapp cannot and probably will never be able to download the files from the ftp servers, not because XMLHttpRequest does not support FTP but because it doesn't support Cross Origin requests to servers that don't specifically allow them.

    A local web server, with the cab files in some directory. You'll need to set the header for all requests to include Access-Control-Allow-Origin "*", you can find out how to do that here: http://enable-cors.org/server.html

    A lot of hard drive space. 3GB of space is required for the whole process, it reduces to 1.5GB after the files are extracted. Even then it is very hard to delete the files because of lack of browser manufacturer attention to persistent storage features so when you want to get rid of it you'll need to clear cache/something along the lines of "static data"

    When the game prompts you for an URL enter the url of the folder containing the cabs on your localhost server. The process takes a few minutes (downloading and extracting), I did say it wasn't easy!

    I'm going to try to recreate the city viewer next, so the next thing to work on is TGA image reading. I might try simantics one day, I'm not sure if JS could handle it though.
  2. TRS

    TRS Member

    Re: Entire TSO CAS in HTML5

    Great!

    I've also tryed to create a HTML5 version of TSO, but I also work on commercial games, and don't have enought time to do this project. My website: https://sites.google.com/site/thesimsonline5/
    Maybe we can merge our projects?
    Isn't it a good idea to upload everything to a free webhosting to slove the local data problem?

    TR
  3. xezno

    xezno Member

    Re: Entire TSO CAS in HTML5

    I agree.
    I am not downloading 3GB (that's 3 days of downloading) for an unfinished game. No way, Jose.
  4. RHY3756547

    RHY3756547 FreeSO Developer Staff Member Moderator

    Re: Entire TSO CAS in HTML5

    I don't see much use in merging with your project if you don't have enough time to work on it and don't have any substantial progress... If you manage to get any cool things working though don't hesitate to contact me and we can combine them and collaborate. Even then, I might not even go all the way with this on my own. :?

    I can't upload everything to a free webhost for numerous reasons:
    - Redistributing the game files is potentially illegal, I'll need to look into this
    - Free web hosts usually have a maximum disk space limit of 1 GB, the cabs are around 1.25GB.
    - The bandwidth used by even one download would flag up some warnings for the webhost and they would most likely shut down the site.

    Depending on laws on redistribution/proxy servers I may be able to code an ftp proxy server so that you can download the files from them but it would be routed though the proxy server to avoid Cross Origin problems. For bandwidth and cpu's sake though it would be better if I could statically host the files without redownloading them every time. :(

    The only thing you could have agreed to there is the "upload it to a webhost" thing, but that won't stop it being a 1.25GB download so I'm not sure what you're actually agreeing with.

    It's not a 3GB download, it's only 1.25GB. The 3GB figure is hard drive space required for the install process. I didn't expect anyone to be willing to go through the effort of installing it since it's so big; I just included it in case anyone was curious, wanted to expand on it or wanted to see how it works.
  5. AidanM

    AidanM Member

    Re: Entire TSO CAS in HTML5

    RHY this is awesome! Def gonna try it out, your video seems to show a smooth CAS screen. I'm impressed as most HTML5 games are usually laggy. BTW is is this just CAS or SAS and CAS? Regardless kudoos! :D
  6. RHY3756547

    RHY3756547 FreeSO Developer Staff Member Moderator

    Re: Entire TSO CAS in HTML5

    It's currently only CAS, however select a sim's UI script renders fine:
    http://dl.dropboxusercontent.com/u/12239448/sas.png
    I'm not sure what's with the buttons (haven't actually coded text on buttons yet so nothing should appear at all), but the main elements render fine. SAS reuses the Person3DView custom element from CAS so the person rendering would work if I plugged a head and body into it.

    The CAS currently runs at 60 fps on my laptop, however it's already hitting around 50% cpu usage. 25% is the UI redrawing every frame (the hit from redrawing the skin browsers is insane) and 25% is from the mesh wrapping in vitaboy-webgl. The actual 3d rendering is negligible because there are only like 500 polys and 1 texture to draw, and it's GFX accelerated. ;)

    HTML5 isn't that slow, you just need to optimise your games because you're using a dynamically recompiled language so it's expected that it will run marginally slower than native. In another thread someone mentioned Tirnua being slow and referencing HTML5, but that uses flash and does not have any GFX acceleration for sim/lot rendering.

    Simantics is most likely possible and I don't expect it to be much more intensive than emulating a gameboy, which I've already got down to a tee at only 10% CPU. With iOS7, it even emulates at full speed on the iPhone 5 and up, so I'm not really worried about performance.

    The most likely problem is simantics on the server, since rule #1 of online games is clients can't be trusted so everything would need to run on the server as well. I would not be able to do this in javascript (node.js) at an acceptable speed, so I would need to port my implementation of simantics to a c++ standalone and make sure everything is EXACTLY THE SAME (or the game will desync).
  7. RHY3756547

    RHY3756547 FreeSO Developer Staff Member Moderator

    Re: Entire TSO CAS in HTML5

    Proof of concept for city renderer:
    https://dl.dropboxusercontent.com/u/122 ... ender.html
    Still needs blend textures for tiles, but it already looks pretty accurate at far view. The size/elevation is almost perfect. Still need to code a tga reader so I can read the textures from the game when i move it into the main app.

    Also currently renders at 60fps, might not be the best idea for old computers not equipped to render 300k tris all with a shader at that rate. Might make near zoom render less polys somehow, need some sort of frustum culling.

    The sims online seems to reduce the scale of the heightmap when zooming in, so you may see the land shifting mid zoom. You don't see this in the sims online because the zoom is instant. I'm not sure if I want to honor this, but not honoring it would leave a lot of land inhabitable because of it being too steep.

    The vertex colour map is also not applied in the near view, but it looks nice so I'll keep it unless it causes bad visual discrepancies on other maps/when i add blending.
  8. RHY3756547

    RHY3756547 FreeSO Developer Staff Member Moderator

    Re: Entire TSO CAS in HTML5

    I added blending between terrain types, those ugly discrepancies you see occasionally are present in tso as well. It won't be easy to work around (will require using 3230423 texture registers), so I might not do that till later. It looks a lot better now though, for the most part. TSO's map rendering wasn't exactly the best in the first place.

    I also programmed a .tga reader to read the blend tiles. It should work with run length encoded and raw RGB and colour mapped images. Grayscale targa isn't supported yet but I don't think it's present in the game. I haven't tested colour mapped targa since i don't have any files to test it with, hopefully it isn't terribly broken.
  9. RHY3756547

    RHY3756547 FreeSO Developer Staff Member Moderator

    Re: Entire TSO CAS in HTML5 and other things

    I probably shouldn't be using the url I posted here as my working draft, but it's been updated to now draw trees + tree types up close. The trees and future sprites use 2d canvas to simplify the drawing process, since alpha blending, many textures etc would be a disaster in WebGL and it would better to save that energy for coding the full lot renderer and its most likely insane shaders + blend mode jiggery pokery.

    I'd like to write a wiki page on this but it's all so incredibly simple compared to the file formats that it's not worth the effort. The difficulty is in the renderer implementation, which isn't really something you can document since it's platform specific.
  10. xezno

    xezno Member

    Nice work. In about a months time I can imagine playing a good beta! Well done, keep it up!
  11. AidanM

    AidanM Member

    Re: Entire TSO CAS in HTML5

    I've had a busy week and this made it all worth all the while! I've been messing around with the city blasting city music, don't tell me, I know, I'm a geek :lol: .I can already see the red dots blinking,spotlights beaming, and the aroma pizza filling my sim's nose. Ok I need to stop myself :p Congratulations on this find and if you need help with anything don't hesitate to ask!
  12. xezno

    xezno Member

    I'm also experienced in HTML5 and stuff so if you need help dont hesitate to ask. I have some of the Sims music, as I have TS1 which has the same music.
  13. RHY3756547

    RHY3756547 FreeSO Developer Staff Member Moderator

    Thanks for the interest Aidan! You shouldn't get too optimisic though, not until I've got a working SimAntics VM at least. :p The Sims 1's SimAntics language seems pretty well documented, so since the sims online only has a few differing instructions there should be enough information to construct the VM without mining additional information though reverse engineering the binaries. (not really my strong point)

    I've got an idea on how to sync the VM to the server with minimal data transfer, but I'll talk about that nearer the time (and when i guarantee that it's actually possible).

    I already have The Sims Online fully downloaded, both on my HDD and in my browser (!) for the CAS test (which i'll move this into once i've got it functioning perfectly). The Sims Online has a lot more original music than you would think, the only songs reused from TS1 are a few build mode songs for the map view and most of the radio music.
  14. xezno

    xezno Member

    OK then, and it's good too because I need to focus on my project ;)
  15. RHY3756547

    RHY3756547 FreeSO Developer Staff Member Moderator

    I added edge and middle mouse scolling. The cursors aren't set up for edge scrolling yet but they are for middle mouse scrolling because it depends on visual feedback to be usable.

    There's also highlighting of the tile the mouse is over. It doesn't look accurate because the near zoom scale is different from the real game, but i might stick with this scaling since it makes more sense considering that it's the live mode scaling and it means the forest tiles will have 1 to 1 scaling (fit tiles perfectly) and it gives much more vision.
  16. AidanM

    AidanM Member

    Despite the minor difference that looks just like a city. Wonderful work RHY!!! Glad you had some houses in your cache still! Gahhh do I miss roof art lol. Another question, when you construct a VM successfully what will be next for your project?
  17. RHY3756547

    RHY3756547 FreeSO Developer Staff Member Moderator

    Well, the VM is the game! If I crack that, I've basically got the whole thing working, since nearly all of the game logic is in the objects. The part after that would be to get it working over the internet, hence the sims ONLINE. :p
  18. RHY3756547

    RHY3756547 FreeSO Developer Staff Member Moderator

    This is why near view doesn't look correct:
    [​IMG]
    In the real game the lots are scaled to 128px wide... However there's this extra margin space which seems to be for roads or something, the lines have very peculiar behavior. They don't draw on borders between land and unbuildable land, and the real edge of the tile is not drawn when the border lines are drawn. I'll need to get this right for it to look correct.

    Also, in the game near zoom isn't affected by vertex color, but is still shaded classic shitty 2002 style. Right now the vertex colour is offset by a tile in the wrong direction, so once I correct that it should be better. Not sure if I should remove vertex colours on near view because they make everything so much more vibrant/detailed.
  19. RHY3756547

    RHY3756547 FreeSO Developer Staff Member Moderator

    Just implemented what I mentioned above. Does anyone have a screenshot of a city with roads? I want to see what they looked like in the original.
  20. [​IMG]

    [​IMG]

Share This Page