Merge pull request #27 from ctrlVnt/smoke

Add smoke when drift

README.md

@@ -45,36 +45,36 @@ Start the dev server
 
 ## TO - DO
 
-- Design Landing page
+- [ ] Design Landing page
 
-- Add items
+- [ ] Add items
 
-- Add texture to the flame shaders
+- [ ] Add texture to the flame shaders
 
-- Add curve/length modifiers to drift particles 3/4
+- [ ] Add curve/length modifiers to drift particles 3/4
 
-- Add Skid marks 
+- [ ] Add Skid marks 
 
-- Add smokes
+- [x] Add smokes
 
-- Add wind screen effect when boosting
+- [ ] Add wind screen effect when boosting
 
-- Improve sound design quality
+- [ ] Improve sound design quality
 
-- Design UI for HUD
+- [ ] Design UI for HUD
 
-- Make Time Trial mode
+- [ ] Make Time Trial mode
 
-- Design tracks and checkpoints
+- [ ] Design tracks and checkpoints
 
-- Improve code quality
+- [ ] Improve code quality
 
-- Items
+- [ ] Items
-  - Tennis ball
+  - [ ] Tennis ball
-  - Bomb
+  - [ ] Bomb
-  - Real red shell
+  - [ ] Real red shell
-  - Treats
+  - [ ] Treats
-  - ?
+  - [ ] ?
 
 ## License
 

src/components/Particles/smoke/SmokeParticle.jsx

@@ -0,0 +1,82 @@
+import React, { useRef, useMemo } from "react";
+import { useLoader, useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+
+export const SmokeParticle = ({ position, png, leftDrift, rightDrift, delay = 0 }) => {
+  const texture = useLoader(THREE.TextureLoader, png);
+  const pointsRef = useRef();
+  const initialized = useRef(false);
+
+  // Initialize after delay
+  useMemo(() => {
+    const timer = setTimeout(() => {
+      initialized.current = true;
+    }, delay);
+    return () => clearTimeout(timer);
+  }, [delay]);
+
+  const points = useMemo(() => {
+    const geom = new THREE.BufferGeometry();
+    geom.setAttribute(
+      "position",
+      new THREE.Float32BufferAttribute(position, 3)
+    );
+    return geom;
+  }, [position]);
+
+  useFrame(({clock}, delta) => {
+    if (!initialized.current) return;
+
+    const pointsCurrent = pointsRef.current;
+
+    if(leftDrift || rightDrift){
+      pointsCurrent.position.z += 0.1 * delta * 144;
+
+      //Set inclination
+      if(leftDrift){
+        pointsCurrent.position.x -= 0.09 * delta * 144;
+      }
+
+      if(rightDrift){
+        pointsCurrent.position.x += 0.09 * delta * 144;
+      }
+
+      if(pointsCurrent.position.x < -1.8 || pointsCurrent.position.x > 1.8) {
+        pointsCurrent.position.z = 0;
+        pointsCurrent.position.x = 0;
+        pointsCurrent.material.opacity = 1.5;
+        pointsCurrent.material.size = 4;
+      }
+    
+      if(pointsCurrent.material.opacity > 0) {
+        pointsCurrent.material.opacity -= 0.01 * delta * 144;
+      }
+
+      if(pointsCurrent.material.size > 0) {
+        //Shrinking effect
+        pointsCurrent.material.size -= 0.1* delta * 144;
+      }
+
+    } else {
+      pointsCurrent.position.z = 0;
+      pointsCurrent.position.x = 0;
+      pointsCurrent.material.opacity = 0;
+      pointsCurrent.material.size = 0;
+    }
+
+  });
+
+  return (
+    <points ref={pointsRef} geometry={points}>
+      <pointsMaterial
+        size={1}
+        alphaMap={texture}
+        transparent={true}
+        depthWrite={false}
+        color={0xBFBFBF}
+        opacity={1}
+        toneMapped={false}
+      />
+    </points>
+  );
+};

src/components/Particles/smoke/SmokeParticles.jsx

@@ -0,0 +1,24 @@
+import { SmokeParticle } from "./SmokeParticle";
+
+export const SmokeParticles = ({ driftRight, driftLeft }) => {
+
+
+  return (
+    <group>
+      <SmokeParticle
+        position={[-0.6, 0.05, 0.5]}
+        png="./particles/fire_02.png"
+        leftDrift={driftLeft}
+        rightDrift={driftRight}
+        delay={200}
+      />
+      <SmokeParticle
+        position={[0.6, 0.05, 0.5]}
+        png="./particles/fire_01.png"
+        leftDrift={driftLeft}
+        rightDrift={driftRight}
+        delay={200}
+      />
+    </group>
+  );
+};

src/components/PlayerController.jsx

@@ -15,7 +15,7 @@ import { DriftParticlesRight } from "./Particles/drifts/DriftParticlesRight";
 
 import { PointParticle } from "./Particles/drifts/PointParticle";
 
-import { FlameParticles } from "./Particles/flames/FlameParticles";
+import { SmokeParticles } from "./Particles/smoke/SmokeParticles";
 import { useStore } from "./store";
 import { Cylinder } from "@react-three/drei";
 import FakeGlowMaterial from "./ShaderMaterials/FakeGlow/FakeGlowMaterial";
@@ -273,6 +273,7 @@ export const PlayerController = ({
     if (
       jumpIsHeld.current &&
       currentSteeringSpeed > 0 &&
+      upPressed &&
       pointer.x < -0.1 &&
       !driftRight.current
     ) {
@@ -281,6 +282,7 @@ export const PlayerController = ({
     if (
       jumpIsHeld.current &&
       currentSteeringSpeed > 0 &&
+      upPressed &&
       pointer.x > 0.1 &&
       !driftLeft.current
     ) {
@@ -569,6 +571,7 @@ export const PlayerController = ({
           {/* <FlameParticles isBoosting={isBoosting} /> */}
           <DriftParticlesLeft turboColor={turboColor} scale={scale} />
           <DriftParticlesRight turboColor={turboColor} scale={scale} />
+          <SmokeParticles driftRight={driftRight.current} driftLeft={driftLeft.current} />
           <PointParticle
             position={[-0.6, 0.05, 0.5]}
             png="./particles/circle.png"

src/components/PlayerControllerGamepad.jsx

@@ -15,7 +15,7 @@ import { DriftParticlesRight } from "./Particles/drifts/DriftParticlesRight";
 
 import { PointParticle } from "./Particles/drifts/PointParticle";
 
-import { FlameParticles } from "./Particles/flames/FlameParticles";
+import { SmokeParticles } from "./Particles/smoke/SmokeParticles";
 import { useStore } from "./store";
 import { Cylinder } from "@react-three/drei";
 import FakeGlowMaterial from "./ShaderMaterials/FakeGlow/FakeGlowMaterial";
@@ -545,6 +545,7 @@ export const PlayerControllerGamepad = ({
           {/* <FlameParticles isBoosting={isBoosting} /> */}
           <DriftParticlesLeft turboColor={turboColor} scale={scale} />
           <DriftParticlesRight turboColor={turboColor} scale={scale} />
+          <SmokeParticles driftRight={driftRight.current} driftLeft={driftLeft.current} />
           <PointParticle
             position={[-0.6, 0.05, 0.5]}
             png="./particles/circle.png"

src/components/PlayerControllerKeyboard.jsx

@@ -15,7 +15,8 @@ import { DriftParticlesRight } from "./Particles/drifts/DriftParticlesRight";
 
 import { PointParticle } from "./Particles/drifts/PointParticle";
 
-import { FlameParticles } from "./Particles/flames/FlameParticles";
+import { SmokeParticles } from "./Particles/smoke/SmokeParticles";
+import { FlameParticle } from "./Particles/flames/FlameParticle";
 import { useStore } from "./store";
 import { Cylinder } from "@react-three/drei";
 import FakeGlowMaterial from "./ShaderMaterials/FakeGlow/FakeGlowMaterial";
@@ -261,6 +262,7 @@ export const PlayerControllerKeyboard = ({
     if (
       jumpIsHeld.current &&
       currentSteeringSpeed > 0 &&
+      upPressed &&
       leftPressed &&
       !driftRight.current
     ) {
@@ -269,6 +271,7 @@ export const PlayerControllerKeyboard = ({
     if (
       jumpIsHeld.current &&
       currentSteeringSpeed > 0 &&
+      upPressed &&
       rightPressed > 0.1 &&
       !driftLeft.current
     ) {
@@ -557,6 +560,7 @@ export const PlayerControllerKeyboard = ({
           {/* <FlameParticles isBoosting={isBoosting} /> */}
           <DriftParticlesLeft turboColor={turboColor} scale={scale} />
           <DriftParticlesRight turboColor={turboColor} scale={scale} />
+          <SmokeParticles driftRight={driftRight.current} driftLeft={driftLeft.current} />
           <PointParticle
             position={[-0.6, 0.05, 0.5]}
             png="./particles/circle.png"

src/components/PlayerControllerTouch.jsx

@@ -15,7 +15,7 @@ import { DriftParticlesRight } from "./Particles/drifts/DriftParticlesRight";
 
 import { PointParticle } from "./Particles/drifts/PointParticle";
 
-import { FlameParticles } from "./Particles/flames/FlameParticles";
+import { SmokeParticles } from "./Particles/smoke/SmokeParticles";
 import { useStore } from "./store";
 import { Cylinder } from "@react-three/drei";
 import FakeGlowMaterial from "./ShaderMaterials/FakeGlow/FakeGlowMaterial";
@@ -497,6 +497,7 @@ export const PlayerControllerTouch = ({
           {/* <FlameParticles isBoosting={isBoosting} /> */}
           <DriftParticlesLeft turboColor={turboColor} scale={scale} />
           <DriftParticlesRight turboColor={turboColor} scale={scale} />
+          <SmokeParticles driftRight={driftRight.current} driftLeft={driftLeft.current} />
           <PointParticle
             position={[-0.6, 0.05, 0.5]}
             png="./particles/circle.png"