Added more particle features

changelog.md

@@ -1,40 +1,45 @@
 # The Modding Tree changelog:
 
-- Fixed using text inputs for Numbers.
+### v2.5.9 - 5/18/21
+- Fixed issue when using text inputs for Numbers.
+- Added particle color feature.
+- Particle speed and dir are updated as it moves.
+- Added setSpeed and setDir for particles.
+- Added more trig functions.
 
-# v2.5.8 - 5/17/21
+### v2.5.8 - 5/17/21
 - Added makeShinies, which creates a stationary particle in a random spot.
 - Bars will visually update more quickly.
 - Fixed a major particle-related issue.
 - Fixed autoUpgrade.
 - Fixed a minor visual issue with tree nodes.
 
-# v2.5.7 - 5/15/21
+### v2.5.7 - 5/15/21
 - Added a particle system! Not only can it be used for visual effects, but particles can interact with the mouse. They could be used to create golden cookies or collectables, for example.
 - Added marked feature to buyables, clickables, and challenges. By default, stars multi-completion challenges when maxed.
 - Added 'deactivated' feature to layers, which disables many features.
 - Improved number formatting slightly.
 
-# v2.5.6 - 5/14/21
+### v2.5.6 - 5/14/21
 - You can now use non-numeric ids for upgrades, buyables, etc.
 - Fixed an exploit that let you buy an extra buyable.
 - Moved basic getter/setter functions to easyAccess.js.
 
-# v2.5.5.2 - 5/12/21
+### v2.5.5.2 - 5/12/21
 - Fixed a major issue with buyables.
 - Fixed a variety of tabFormat-related issues.
 - Fixed commas appearing in decimal places (thanks to pg132!)
 
-# v2.5.5.1 - 5/12/21
+### v2.5.5.1 - 5/12/21
 - Fixed clickables.
 
-# v2.5.5 - 5/12/21
+### v2.5.5 - 5/12/21
 - Added grids! They are a grid of buttons which behave the same, but have their own data. Good for inventory grids, map tiles, and more!
 - Added "marked" feature to add a mark to a node. Can be an image instead of a star. (Originally by Jacorb)
 - Added "layer-proxy" component that lets you use components from another layer.
 - Added the ability to display non-whole numbers in main-display.
 
-# v2.5.4 - 5/10/21
+### v2.5.4 - 5/10/21
 - Added a setting to always use single-tab mode.
 - Added directMult, which multiplies prestige gain after exponents and softcaps. It actually multiplies gain for static layers.
 - Added onEnter and onExit for challenges.
@@ -43,21 +48,21 @@
 - Fixed a visual issue on mobile, thanks to thepaperpilot.
 - Improved documentation in general.
 
-# v2.5.3 - 5/8/21
+### v2.5.3 - 5/8/21
 - Improved performance of tab formats and bars.
 - Respec confirmation settings are now kept on resets.
 - Improved compatibility with older browsers.
 - Fixed missing pixel on vertical bars.
 
-# v2.5.2.1 - 5/7/21
+### v2.5.2.1 - 5/7/21
 - Fixed microtabs making layers highlight incorrectly.
 
-# v2.5.2 - 5/7/21
+### v2.5.2 - 5/7/21
 - Added glowColor for subtabs.
 - Improved the display for extremely small numbers.
 - Fixed issues in the buyable docs.
 
-# v2.5.1 - 5/7/21
+### v2.5.1 - 5/7/21
 - Fixed dynamic things in tabFormat not updating.
 
 ## v2.5: Dreams Really Do Come True - 5/7/21
@@ -77,7 +82,7 @@
 - Added formatting support for very small numbers. Disabled in most places by default because rounding errors might cause issues. Access it with formatSmall, or enable it globally by adding "allowSmall: true" to modInfo.
 
 
-# v2.4.1 - 4/29/21
+### v2.4.1 - 4/29/21
 - A number of minor fixes, many thanks to thepaperpilot.
 - The respec confirmation checkbox is now part of the respec-button component.
     (This also fixes the checkbox appearing when there is no respec button)
@@ -100,7 +105,7 @@
 - Tooltips now use HTML (this means you need to replace any newlines with <br>)
 
 
-# v2.π.1 - 4/7/21
+### v2.π.1 - 4/7/21
 - Fixed formatting for some larger numbers.
 - Upgrades will expand if there is too much text to display. 
 - Fixed styling challenges.
@@ -116,28 +121,28 @@
 - Code reorganization and style improvements by fudo.
 
 
-## v2.3.5 - 12/21/20
+### v2.3.5 - 12/21/20
 - Added resetTime, which tracks the time since a layer prestiged or was reset.
 - A layer node will be highlighted red if one of its subtabs is highlighted red.
 - Fixed issues with keeping challenges, buyables, and clickables on reset.
 - Improved the unlocking of custom layers.
 - Other minor fixes.
 
-## v2.3.4 - 12/16/20
+### v2.3.4 - 12/16/20
 - Added a node image feature.
 - Resource display now always shows the amount of the currency the layer's gain is based on.
 - Added spacing between tree nodes.
 - Another attempt to fix tooltip flickering.
 
-## v2.3.3 - 12/13/20
+### v2.3.3 - 12/13/20
 - Fixed the first node in a row always taking up space.
 - layerShown is now optional.
 - All prestige types can now use features for custom prestige types.
 
-## v2.3.2 - 12/13/20
+### v2.3.2 - 12/13/20
 - Fixed achievement/milestone popups.
 
-## v2.3.1 - 12/12/20
+### v2.3.1 - 12/12/20
 - Another attempt to fix flickering tooltips.
 - The "this" keyword should work everywhere except tabFormat arrays (although I may have missed some things).
 - Fixed tree branches not updating when scrolling on the right-side tab.

docs/!general-info.md

@@ -18,7 +18,7 @@ While reading this documentation, the following key will be used when describing
 - **sometimes required**: This is may be required, depending on other things in the layer.
 - **optional**: You can leave this out if you don't intend to use that feature for the layer.
 - **assigned automagically**: This value will be set automatically and override any value you set.
-- **deprecated**: This feature is not recommended to be used anymore, and may be removed in future versions of TMT.
+- **deprecated**: This feature is not recommended to be used, because newer features are able to achieve the same thing in a better, easier way.
 
 ## Table of Contents
 

docs/particles.md

@@ -30,9 +30,10 @@ All distances are in pixels and angles are in degrees, with 0 being up and going
 - text: Displays text on the particle. Can use basic HTML.
 - style: Lets you apply other CSS styling to the particle.
 - width, height: The dimensions of the particle. Default is 35 and 35.
+- color: Sets the color of the image to this color.
 
 - angle: The angle that the particle should face. Default is 0.
-- dir: The angle that the particles should move in, before spread is factored in. Default is whatever angle is.
+- dir: The initial angle that the particles should move in, before spread is factored in. Default is whatever angle is.
 - spread: If there are several particles, they will be spread out by this many degrees, centered on dir. Default is 30.
 
 - rotation: The amount that the (visual) angle of the particle should change by. Default is 0.
@@ -41,9 +42,10 @@ All distances are in pixels and angles are in degrees, with 0 being up and going
 
 - x, y: The starting coordinates of the particle. Default is at the mouse position.
 - offset: How far from the start each particle should appear. Default is 10.
+- xVel, yVel: Set initially based on other properties, then used to update movement.
 
 - layer: When changing tabs, if leaving the `layer` tab, this particle will be erased.
-
+- You can add other features to particles, but you must impliment their effects yourself.
 
 Function features: These stay as functions and are for more advanced things. They are optional.
 
@@ -53,7 +55,9 @@ Function features: These stay as functions and are for more advanced things. The
 
 Other useful things that are not features of the particle object:
 
+- setDir(particle, dir), setSpeed(particle, speed): Set the speed/direction on a particle.
 - clearParticles(check): Function to delete particles. With no check, it deletes all particles. Check is a function that takes a particle, and returns true if that particle should be deleted.
 - You can use Vue.delete(particles, this.id) to make a particle delete itself.
 - mouseX and mouseY are variables that track the mouse position.
-- sin(x), cos(x): functions that do these operations, with x in degrees. (Instead of radians).
+- sin(x), cos(x), tan(x): functions that do these operations, with x in degrees. (Instead of radians).
+- asin(x), acos(x), atan(x): functions that do these operations, with the returned value in degrees. (instead of radians).

js/Demo/demoLayers.js

@@ -581,6 +581,7 @@ const coolParticle = {
     },
     update() {
         //this.width += 1
+        //setDir(this, 135)
     },
     layer: 'f',
 }

js/Demo/demoMod.js

@@ -11,7 +11,7 @@ let modInfo = {
 
 // Set your version in num and name
 let VERSION = {
-	num: "2.5.8",
+	num: "2.5.9",
 	name: "Dreams Really Do Come True",
 }
 

js/game.js

@@ -5,7 +5,7 @@ var scrolled = false;
 
 // Don't change this
 const TMT_VERSION = {
-	tmtNum: "2.5.8",
+	tmtNum: "2.5.9",
 	tmtName: "Dreams Really Do Come True"
 }
 

js/technical/particleSystem.js

@@ -43,13 +43,6 @@ function makeShinies(data, amount=1) {
     makeParticles(data, amount, "shiny")
 }
 
-function sin(x) {
-    return Math.sin(x*Math.PI/180)
-}
-
-function cos(x) {
-    return Math.cos(x*Math.PI/180)
-}
 
 function updateParticles(diff) {
 	for (p in particles) {
@@ -65,10 +58,23 @@ function updateParticles(diff) {
             particle.angle += particle.rotation
             particle.x += particle.xVel
             particle.y += particle.yVel
+            particle.speed = Math.sqrt(Math.pow(particle.xVel, 2) + Math.pow(particle.yVel, 2))
+            particle.dir = atan(-particle.xVel/particle.yVel)
             particle.yVel += particle.gravity
+        }
+	}
+}
 
-        }
-	}
+function setDir(particle, dir) {
+    particle.dir = dir
+    particle.xVel = particle.speed * sin(particle.dir)
+    particle.yVel = particle.speed * cos(particle.dir) * -1
+}
+
+function setSpeed(particle, speed) {
+    particle.speed = speed
+    particle.xVel = particle.speed * sin(particle.dir)
+    particle.yVel = particle.speed * cos(particle.dir) * -1
 }
 
 const newParticles = {
@@ -137,7 +143,7 @@ function getOpacity(particle) {
 }   
 
 function constructParticleStyle(particle){
-    return {
+    let style =  {
         left: (particle.x  - particle.height/2) + 'px',
         top: (particle.y - particle.height/2) + 'px',
         width: particle.width + 'px',
@@ -145,8 +151,15 @@ function constructParticleStyle(particle){
         transform: "rotate(" + particle.angle + "deg)",
         opacity: getOpacity(particle),
         "pointer-events": (particle.onClick || particle.onHover) ? 'auto' : 'none',
-        "background-image": "url(" + particle.image + ")",
     }
+    if (particle.color) {
+        style["background-color"] = particle.color
+        style.mask = "url(#pmask" + particle.id + ")"
+        style["-webkit-mask-box-image"] = "url(" + particle.image + ")"
+    }
+    else 
+        style["background-image"] = "url(" + particle.image + ")"
+    return style
 }
 
 function clearParticles(check) {
@@ -158,3 +171,16 @@ function clearParticles(check) {
         }
     }
 }
+
+// Trig with degrees
+function sin(x) { return Math.sin(x*Math.PI/180)}
+
+function cos(x) {return Math.cos(x*Math.PI/180)}
+
+function tan(x) {return Math.tan(x*Math.PI/180)}
+
+function asin(x) { return Math.asin(x)*180/Math.PI}
+
+function acos(x) { return Math.acos(x)*180/Math.PI}
+
+function atan(x) { return Math.atan(x)*180/Math.PI}

js/technical/systemComponents.js

@@ -191,9 +191,15 @@ var systemComponents = {
 
 	'particle': {
 		props: ['data', 'index'],
-		template: `<div class='particle instant' v-bind:style="[constructParticleStyle(data), data.style]" 
+		template: `<div><div class='particle instant' v-bind:style="[constructParticleStyle(data), data.style]" 
 			v-on:click="run(data.onClick, data)"  v-on:mouseenter="run(data.onMouseOver, data)" v-on:mouseleave="run(data.onMouseLeave, data)" ><span v-html="data.text"></span>
 		</div>
+		<svg version="2" v-if="data.color">
+		<mask v-bind:id="'pmask' + data.id">
+        <image id="img" v-bind:href="data.image" x="0" y="0" :height="data.width" :width="data.height" />
+    	</mask>
+    	</svg>
+		</div>
 		`
 	},