Jump to content
Search Community

Developing a simple 3d environment using DOM only using GSAP

Halcyon test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

This is perhaps not the best place for this question, but I know there's a lot of animation expertise in this forum. I generally don't want to use canvas due to its complexity and dev pain, so I am considering developing a simple pseudo 3d environment using GSAP. Think Phantasy Star 1 dungeon hallways, which was developed in 1987 on the Sega Master System. Can the DOM do something like this 30 years later? I don't need hills or anything complex like that. Just flat surfaces. Moving down hallways. Something suitable to a dungeon crawler RPG. The most complicated thing I would like is turning 90 degree corners. I think moving down a straight hallway wouldn't be too hard to develop. I think this could be done using either DOM or SVG...

 

I'm curious if anyone has any pointers, advice, or general guidance on creating something like this using GSAP. Regardless, I am going to attempt developing something like this. I'm just curious if others have tried something similar.

 

Sample video to get an idea what I have in mind:

 

 

Link to comment
Share on other sites

Hey Joe,

 

My gut reaction to this was "never in 100 years would I even think of using CSS/HTML/JS". My assumption would be that you could design an decent 3D environment and send a camera along a pre-determined path, but once you have the user controlling movement and need collision-detection with walls it would be "game over" (ha).

 

However, a quick google search proved me mostly wrong:

 

Check out these demos: http://keithclark.co.uk/labs/css-fps/

 

Pretty crazy and amazing.

 

However, I have to imagine that just because that guy pulled it off  doesn't meant it is going to be easy or at all practical. Its a nice proof concept, but just because you can use a technology to do something, doesn't mean you should. A wise man once said something along the lines of: "Yes, its impressive to see someone running a race upside down on their hands, but it is not the right way and they aren't going to win". I have a similar reaction when I see people using CSS Keyframes for animation.

 

My opinion is that whatever hurdles are involved in learning how to do it using ThreeJS or a proper 3D game engine will pale in comparison to the agony of CSS. Just my 2 cents.

 

C

 

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

I like learning how older games are made. I know you said you didn't want to use canvas, but you might find something interesting in these.

 

Outrun Racing Game

Article - http://codeincomplete.com/posts/javascript-racer/

Demo - http://codeincomplete.com/games/racer/v4-final/

 

Raycasting 3D Engine

Article - http://www.playfuljs.com/a-first-person-engine-in-265-lines/

Demo - http://demos.playfuljs.com/raycaster/

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Seems interesting. I might experiment with this a bit. The Outrun demo is impressive. I am just leery about over-engineering a solution when a simple one will do. I'm not really convinced that there's a robust 3D solution out there for browsers yet. Thanks!

  • Like 1
Link to comment
Share on other sites

I think my main concern is that I want it to perform well at 1920 x 1080, and I'm not sure canvas will be happy about that. I want players to be able to go full screen and use their whole monitor. I'll just have to experiment and find out how it performs.

Link to comment
Share on other sites

12 minutes ago, Maelfyn said:

I think my main concern is that I want it to perform well at 1920 x 1080, and I'm not sure canvas will be happy about that. I want players to be able to go full screen and use their whole monitor. I'll just have to experiment and find out how it performs.

 

A few years ago canvas used to be slower than CSS, but things have changed as canvas is now hardware accelerated in all browsers.

 

Have you checked out the HTML5 Game Devs forum? Lots of good stuff on there.

http://www.html5gamedevs.com/

 

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...