Skip to content

Commit

Permalink
fix: parallax system so effects are more intuitive. 0 is background,
Browse files Browse the repository at this point in the history 
remove: initialPos system

temp: remove simulated position until it is reworked with the new system.

fix: issue when going left with a smaller sized parallax "layer". It would cause it to show the placements of the parallax layer.
  • Loading branch information
@doubleactii
doubleactii committed May 10, 2024
1 parent 98cd4a3 commit 7e56a89
Show file tree
Hide file tree
Showing 7 changed files with 11,607 additions and 11,069 deletions.
22,512 changes: 11,523 additions & 10,989 deletions docs/ast/source/parallax.mjs.json
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions docs/class/src/parallax.mjs~ParallaxSingleton.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -709,7 +709,7 @@ <h3 data-ice="anchor" id="instance-method-remove">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/parallax.mjs.html#lineNumber122">source</a></span></span>
<span data-ice="source"><span><a href="file/src/parallax.mjs.html#lineNumber124">source</a></span></span>
</span>
</h3>

Expand Down Expand Up @@ -770,7 +770,7 @@ <h3 data-ice="anchor" id="instance-method-update">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/parallax.mjs.html#lineNumber138">source</a></span></span>
<span data-ice="source"><span><a href="file/src/parallax.mjs.html#lineNumber140">source</a></span></span>
</span>
</h3>

Expand Down Expand Up @@ -848,7 +848,7 @@ <h3 data-ice="anchor" id="instance-method-init">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/parallax.mjs.html#lineNumber76">source</a></span></span>
<span data-ice="source"><span><a href="file/src/parallax.mjs.html#lineNumber80">source</a></span></span>
</span>
</h3>

Expand Down
70 changes: 36 additions & 34 deletions docs/file/src/parallax.mjs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,10 @@
const map = typeof(pMap) === &apos;string&apos; ? pMap : pInstance.mapName;
// Clone the parallax object
const parallaxInfo = { ...pParallaxInfo };
parallaxInfo.lastCamPos = {
x: VYLO.Client.getViewEye().x,
y: VYLO.Client.getViewEye().y
}
this.init(pInstance, parallaxInfo, x, y, map);
// Set the parallax info to the instance
this.instanceWeakMap.set(pInstance, parallaxInfo);
Expand All @@ -113,8 +117,6 @@
*/
init(pInstance, pParallaxInfo, pX, pY, pMap) {
if (VYLO) {
// Set the initial position.
pParallaxInfo.initialPos = { x: pX, y: pY };
// If this instance is set to loop, then it needs a left and right clone
if (pParallaxInfo.loop) {
// Create a left and right clone
Expand Down Expand Up @@ -175,58 +177,58 @@
*/
update(pCameraX = 0, pCameraY = 0, pSimulatedPosition) {
for (const instance of this.instances) {
/**
* The camera&apos;s x position. May be adjusted if pSimulatedPosition is used.
* @type {number}
*/
// The camera&apos;s x position. May be adjusted if pSimulatedPosition is used.
let cameraX = pCameraX;
/**
* The camera&apos;s x position. May be adjusted if pSimulatedPosition is used.
* @type {number}
*/
// The camera&apos;s x position. May be adjusted if pSimulatedPosition is used.
let cameraY = pCameraY;

const parallaxInfo = this.instanceWeakMap.get(instance);

// Move the instance with the camera if the parallax is set to 0
const isBackgroundX = parallaxInfo.x === 0;
const isBackgroundY = parallaxInfo.y === 0;

const deltaX = cameraX - parallaxInfo.lastCamPos.x;
const deltaY = cameraY - parallaxInfo.lastCamPos.y;

// How far we moved from the start point
const distX = cameraX * parallaxInfo.x;
const distY = cameraY * parallaxInfo.y;

// Position to set the instance to. We take into account the simulated posiiton if it is passed.
let x = parallaxInfo.initialPos.x + (typeof(pSimulatedPosition) === &apos;number&apos; ? distX - pSimulatedPosition : distX);
let y = parallaxInfo.initialPos.y + distY;

// Move the instance with the camera if the parallax is set to 1
if (parallaxInfo.x === 1) {
if (typeof(pSimulatedPosition) === &apos;number&apos;) {
cameraX = distX - pSimulatedPosition;
}
const distX = deltaX * parallaxInfo.x;
const distY = deltaY * parallaxInfo.y;

// Position to set the instance to.
let x = instance.x + distX;
let y = instance.y + distY;

// Hard code in static backgrounds
if (isBackgroundX) {
x = cameraX - instance.icon.width / 2;
}
// Move the instance with the camera if the parallax is set to 1
if (parallaxInfo.y === 1) {
if (isBackgroundY) {
y = cameraY - instance.icon.height / 2;
}

// Set the position
instance.x = x;
instance.y = y;

parallaxInfo.lastCamPos.x = cameraX;
parallaxInfo.lastCamPos.y = cameraY;

if (parallaxInfo.loop) {
if (parallaxInfo.x !== 1) {
// How far we moved relative to the camera
const relativeX = cameraX * (1 - parallaxInfo.x);
// Logic cannot be ran on background instances as they should not loop
if (!isBackgroundX &amp;&amp; !isBackgroundY) {
// The start pos + total width
const endX = parallaxInfo.initialPos.x + instance.icon.width;
const rightEnd = instance.x + instance.icon.width;
// The start pos - total width / 2
const negativeEndX = parallaxInfo.initialPos.x - instance.icon.width / 2;
if (relativeX &gt; endX) {
parallaxInfo.initialPos.x += instance.icon.width;
} else if (relativeX &lt; negativeEndX) {
parallaxInfo.initialPos.x -= instance.icon.width;
const leftEnd = instance.x - instance.icon.width / 6;
if (cameraX &gt; rightEnd) {
instance.x += instance.icon.width;
} else if (cameraX &lt; leftEnd) {
instance.x -= instance.icon.width;
}
}
}
}
}
}
}

Expand Down
10 changes: 5 additions & 5 deletions docs/index.json
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions docs/source.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,9 @@
<td data-ice="identifier" class="identifiers"><span><a href="variable/index.html#static-variable-Parallax">Parallax</a></span>
<span><a href="class/src/parallax.mjs~ParallaxSingleton.html">ParallaxSingleton</a></span></td>
<td class="coverage"><span data-ice="coverage">-</span></td>
<td style="display: none;" data-ice="size">9342 byte</td>
<td style="display: none;" data-ice="lines">195</td>
<td style="display: none;" data-ice="updated">2024-05-06 09:56:54 (UTC)</td>
<td style="display: none;" data-ice="size">9174 byte</td>
<td style="display: none;" data-ice="lines">197</td>
<td style="display: none;" data-ice="updated">2024-05-06 10:42:15 (UTC)</td>
</tr>
</tbody>
</table>
Expand Down
4 changes: 2 additions & 2 deletions docs/variable/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,11 +85,11 @@ <h3 data-ice="anchor" id="static-variable-Parallax">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/parallax.mjs.html#lineNumber195">source</a></span></span>
<span data-ice="source"><span><a href="file/src/parallax.mjs.html#lineNumber197">source</a></span></span>
</span>
</h3>

<div data-ice="importPath" class="import-path"><pre class="prettyprint"><code data-ice="importPathCode">import {Parallax} from &apos;<span><a href="file/src/parallax.mjs.html#lineNumber195">parallax</a></span>&apos;</code></pre></div>
<div data-ice="importPath" class="import-path"><pre class="prettyprint"><code data-ice="importPathCode">import {Parallax} from &apos;<span><a href="file/src/parallax.mjs.html#lineNumber197">parallax</a></span>&apos;</code></pre></div>



Expand Down
68 changes: 35 additions & 33 deletions src/parallax.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,10 @@ class ParallaxSingleton {
const map = typeof(pMap) === 'string' ? pMap : pInstance.mapName;
// Clone the parallax object
const parallaxInfo = { ...pParallaxInfo };
parallaxInfo.lastCamPos = {
x: VYLO.Client.getViewEye().x,
y: VYLO.Client.getViewEye().y
}
this.init(pInstance, parallaxInfo, x, y, map);
// Set the parallax info to the instance
this.instanceWeakMap.set(pInstance, parallaxInfo);
Expand All @@ -75,8 +79,6 @@ class ParallaxSingleton {
*/
init(pInstance, pParallaxInfo, pX, pY, pMap) {
if (VYLO) {
// Set the initial position.
pParallaxInfo.initialPos = { x: pX, y: pY };
// If this instance is set to loop, then it needs a left and right clone
if (pParallaxInfo.loop) {
// Create a left and right clone
Expand Down Expand Up @@ -137,58 +139,58 @@ class ParallaxSingleton {
*/
update(pCameraX = 0, pCameraY = 0, pSimulatedPosition) {
for (const instance of this.instances) {
/**
* The camera's x position. May be adjusted if pSimulatedPosition is used.
* @type {number}
*/
// The camera's x position. May be adjusted if pSimulatedPosition is used.
let cameraX = pCameraX;
/**
* The camera's x position. May be adjusted if pSimulatedPosition is used.
* @type {number}
*/
// The camera's x position. May be adjusted if pSimulatedPosition is used.
let cameraY = pCameraY;

const parallaxInfo = this.instanceWeakMap.get(instance);

// Move the instance with the camera if the parallax is set to 0
const isBackgroundX = parallaxInfo.x === 0;
const isBackgroundY = parallaxInfo.y === 0;

const deltaX = cameraX - parallaxInfo.lastCamPos.x;
const deltaY = cameraY - parallaxInfo.lastCamPos.y;

// How far we moved from the start point
const distX = cameraX * parallaxInfo.x;
const distY = cameraY * parallaxInfo.y;
const distX = deltaX * parallaxInfo.x;
const distY = deltaY * parallaxInfo.y;

// Position to set the instance to. We take into account the simulated posiiton if it is passed.
let x = parallaxInfo.initialPos.x + (typeof(pSimulatedPosition) === 'number' ? distX - pSimulatedPosition : distX);
let y = parallaxInfo.initialPos.y + distY;

// Move the instance with the camera if the parallax is set to 1
if (parallaxInfo.x === 1) {
if (typeof(pSimulatedPosition) === 'number') {
cameraX = distX - pSimulatedPosition;
}
// Position to set the instance to.
let x = instance.x + distX;
let y = instance.y + distY;

// Hard code in static backgrounds
if (isBackgroundX) {
x = cameraX - instance.icon.width / 2;
}
// Move the instance with the camera if the parallax is set to 1
if (parallaxInfo.y === 1) {
if (isBackgroundY) {
y = cameraY - instance.icon.height / 2;
}

// Set the position
instance.x = x;
instance.y = y;

parallaxInfo.lastCamPos.x = cameraX;
parallaxInfo.lastCamPos.y = cameraY;

if (parallaxInfo.loop) {
if (parallaxInfo.x !== 1) {
// How far we moved relative to the camera
const relativeX = cameraX * (1 - parallaxInfo.x);
// Logic cannot be ran on background instances as they should not loop
if (!isBackgroundX && !isBackgroundY) {
// The start pos + total width
const endX = parallaxInfo.initialPos.x + instance.icon.width;
const rightEnd = instance.x + instance.icon.width;
// The start pos - total width / 2
const negativeEndX = parallaxInfo.initialPos.x - instance.icon.width / 2;
if (relativeX > endX) {
parallaxInfo.initialPos.x += instance.icon.width;
} else if (relativeX < negativeEndX) {
parallaxInfo.initialPos.x -= instance.icon.width;
const leftEnd = instance.x - instance.icon.width / 6;
if (cameraX > rightEnd) {
instance.x += instance.icon.width;
} else if (cameraX < leftEnd) {
instance.x -= instance.icon.width;
}
}
}
}
}
}
}

Expand Down

0 comments on commit 7e56a89

Please sign in to comment.