coestar/sadracer

Building an old-school pseudo 3D racer as a stream theme.

sadracer's Issues

Create separate HUD scene

A scene that overlays the Game scene and displays/controls HUD elements. Example: https://labs.phaser.io/edit.html?src=src%5Cscenes%5Cui%20scene%20es6.js

Relevant discussion: https://www.html5gamedevs.com/topic/38009-phaser-3-hud-menu/

Spiral Roads / Mario Kart Roads

What it says on the tin

It'd be super cool to have a road segment that spiraled around upside down like some kind of sonic or mario kart level
Also, driving on road segments that transition to driving on the wall, or any arbitrary insane road shape.

I have some idea of how to do this, but I haven't put too much thought into the implementation yet.

Function based road segment generation

Currently, the different road segments that can be added are manually defined.
So the more complex segments (like S curve or low rolling hills) are just a collection of add road calls with arguments

I think it'd be cool to define a road segment according to a pair of functions
One for the "height" of the road and one for the shape as seen from above.

y = f(z) as seen from the side
x = f(z) as seen from above

This would make it easier to add very silly roads and roads with more variety.

It is also more Math, so maybe that's a bad idea. (-_-;)

Eventually migrate to Typescript

This will most likely involve also moving to a Node project, still weighing the pros/cons of doing so.

Code structure reorganization

Project is currently in a state of mid-reorg. There are two Game.js, the one under modules is vestigial and will be removed (the main one is /scenes/Game.js). Class-based structure is the plan, but open to suggestions - I'm still learning here.

Implement drawing/display resolution independence

Some roadside sprites should be able to flip horizontally

Some roadside sprites such as trees would benefit from having the option to be flipped horizontally. Initial thought was to base it on which side of the road they are on, but it would be better as a case-by-case option (or even random). Some sprites also don't make sense to flip, such as billboards that have readable text.

Revisit FPS locking code

Thanks to SajjitheSage for pointing this out. Most likely redundant to have any code dedicated to this at all, as there are config settings to handle it.

Threads:
https://stackoverflow.com/questions/59601230/ways-to-limit-phaser3-update-rate
https://phaser.discourse.group/t/how-to-limit-fps-with-phaser-3/275/17?u=saricden

Documentation:
https://photonstorm.github.io/phaser3-docs/Phaser.Core.TimeStep.html
https://photonstorm.github.io/phaser3-docs/Phaser.Types.Core.html#.FPSConfig

Create debug controls

I've added a debug HUD scene (toggle bound to Q), now it needs some controls to fiddle with values.

Convert various utils/math/methods to Phaser utils/math/methods

This is based on an old vanilla Javascript canvas game project and therefore includes a lot of redundant utilities for handling math and drawing. Much of this is provided by the Phaser game engine and can be replaced in-place.

Raid alert idea(s)

Get blue shelled and have the raiding streamer drive by in another car.

Countdown Timer as Licence plate

Integrate the countdown timer into/as the license plate of the car

Implement obs-browser events support

There are a number of useful events/functions available when running in a browser source that would be useful in this project, for instance:

• Awareness of and reacting to OBS scene switching. Different functionalities, appearance, and more depending on which OBS scene is loaded.
• Awareness of whether OBS is currently broadcasting.
• Awareness of whether browser source is currently visible (and perhaps pause game).
• Transition callback support to perhaps perform transition-like behavior during scene switching.

Reference:
https://github.com/obsproject/obs-browser

Car sprite turning should account for speed

Currently, when testing auto drive, if the vehicle stops in the midst of a curve, it remains in the turned position and emitting tire smoke particles. Should be enhanced to account for current speed as well as curve.

Camera Rotation Math

Hiya, Sajji here

Some theoretical camera rotation implementation I haven't tested yet:

x = cos(angle) * x + -sin(angle) * y
y = sin(angle) * x + cos(angle) * y
note: angle is in radians, may want to use a math function version that uses degrees

This math should rotate a point around the focal point of the camera/viewplane.

I believe it would do so around the horizon, but I'm not sure.

The psuedo implementation I wrote up:

• Intercept the projected road points before the polygon is rendered to the projection
• Convert projected road points to coord pairs via a non mutating method
• Apply the rotation math to the (x, y) pairs
• Return the new points as an array
• spread the array to the draw function

If that works how I think, it should rotate the road by whatever amount you want.
To finish the implementation, you'd also have to rotate the coords and angle of the sprites and adjust the rotation of the background elements.

Anyway, that's the current results of my Camera math research

Ending Screen - Sunset

Background fades and turns to a sunset while on end screen

Refactor approach to DebugHUD DOM elements/events

Replace camera rotation implementation

Current camera tilt in turns implementation is a bit of a cheat using the Phaser main camera. The main camera is slightly zoomed in to hide the edges of the graphics, then rotated. This has negative impacts.

Possible alternative is to rotate the world/car/props. This might be problematic because all are drawn differently and therefore would have different requires to ensure all rotate based on the same pivot point.

Investigate Quads for road texture

Phaser 3 has a special mesh called a Quad that allows positioning the corners of the mesh freely. This might be a solution for applying texture sprites to our road.

References:
https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Quad.html
https://phaser.discourse.group/t/is-it-possible-to-skew-sprite-in-tween/7110/3