coestar / sadracer Goto Github PK
View Code? Open in Web Editor NEWBuilding an old-school pseudo 3D racer as a stream theme.
Home Page: https://twitch.tv/Coestar
License: Creative Commons Zero v1.0 Universal
Building an old-school pseudo 3D racer as a stream theme.
Home Page: https://twitch.tv/Coestar
License: Creative Commons Zero v1.0 Universal
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/
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.
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. (-_-;)
This will most likely involve also moving to a Node project, still weighing the pros/cons of doing so.
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.
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.
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
I've added a debug HUD scene (toggle bound to Q), now it needs some controls to fiddle with values.
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.
Get blue shelled and have the raiding streamer drive by in another car.
Integrate the countdown timer into/as the license plate of the car
There are a number of useful events/functions available when running in a browser source that would be useful in this project, for instance:
Reference:
https://github.com/obsproject/obs-browser
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.
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:
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
Background fades and turns to a sunset while on end screen
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.