diff --git a/docs/!general-info.md b/docs/!general-info.md index be7e7d9..6a1e5cf 100644 --- a/docs/!general-info.md +++ b/docs/!general-info.md @@ -37,7 +37,7 @@ While reading this documentation, the following key will be used when describing - [Upgrades](upgrades.md): How to create upgrades for a layer. - [Milestones](milestones.md): How to create milestones for a layer. -- [Buyables](buyables.md): Create rebuyable upgrades for your layer (with the option to make them respec-able). Can be used to make Enhancers or Space Buildings. +- [Buyables](buyables.md): Create rebuyable upgrades for your layer (with the option to make them respec-able). Can be used to make Enhancers or Space Buildings, for example. - [Clickables](clickables.md): A more generalized variant of buyables, for any kind of thing that is sometimes clickable. Between these and Buyables, you can do just about anything. - [Achievements](achievements.md): How to create achievements for a layer (or for the whole game). @@ -50,3 +50,4 @@ While reading this documentation, the following key will be used when describing - [Grids][grids.md]: Create a group buttons that behave the same, but have their own data. Good for map tiles, an inventory grid, and more! - [Infoboxes](infoboxes.md): Boxes containing text that can be shown or hidden. - [Trees](trees-and-tree-customization.md): Make your own trees. You can make non-layer button nodes too! +- [Particle system](particles.md): Can be used to create particles for visual effects, but also interactable things like golden cookies or collectables. diff --git a/docs/particles.md b/docs/particles.md index 19ee30b..9bd2f59 100644 --- a/docs/particles.md +++ b/docs/particles.md @@ -1,3 +1,5 @@ Don't forget - layer -- style \ No newline at end of file +- style +- make text particles +-fade in? \ No newline at end of file diff --git a/js/Demo/demoLayers.js b/js/Demo/demoLayers.js index a56e550..80ba355 100644 --- a/js/Demo/demoLayers.js +++ b/js/Demo/demoLayers.js @@ -300,7 +300,7 @@ addLayer("c", { ["main-display", "prestige-button", "resource-display", ["blank", "5px"], // Height - ["raw-html", function() {return ""}], + ["raw-html", function() {return ""}], ["display-text", "Name your points!"], ["text-input", "thingy"], ["display-text", @@ -560,7 +560,7 @@ const coolParticle = { image:"options_wheel.png", spread: 20, gravity: 2, - time: 9999, + time: 3, rotation (id) { return 20 * (id - 1.5) + (Math.random() - 0.5) * 10 }, @@ -583,4 +583,14 @@ const coolParticle = { //this.width += 1 }, layer: 'f', +} + +const textParticle = { + spread: 20, + gravity: 0, + time: 3, + speed: 0, + text: function() { return "

" + format(player.points)}, + offset: 30, + fadeInTime: 1, } \ No newline at end of file diff --git a/js/components.js b/js/components.js index 9bcce6b..3701d9a 100644 --- a/js/components.js +++ b/js/components.js @@ -592,6 +592,8 @@ function loadVue() { particles, mouseX, mouseY, + shiftDown, + ctrlDown, }, }) } diff --git a/js/technical/particleSystem.js b/js/technical/particleSystem.js index ed368df..6bcaa33 100644 --- a/js/technical/particleSystem.js +++ b/js/technical/particleSystem.js @@ -32,7 +32,7 @@ function makeParticles(data, amount=1) { particle.xVel = particle.speed * sin(particle.dir) particle.yVel = particle.speed * cos(particle.dir) * -1 - + particle.fadeInTimer = particle.fadeInTime Vue.set(particles, particle.id, particle) } @@ -50,6 +50,7 @@ function updateParticles(diff) { for (p in particles) { let particle = particles[p] particle.time -= diff; + particle.fadeInTimer -= diff; if (particle["time"] < 0) { Vue.delete(particles, p); @@ -84,6 +85,8 @@ function getNewParticle() { rotation: 0, gravity: 0, fadeTime: 1, + fadeInTimer: 0, + fadeIn: 0, } } @@ -92,24 +95,33 @@ function updateMouse(event) { mouseY = event.clientY } +function getOpacity(particle) { + if ((particle.time < particle.fadeTime) && particle.fadeTime) + return particle.time / particle.fadeTime + if (particle.fadeInTimer > 0) + return 1 - (particle.fadeInTimer / particle.fadeInTime) + + return 1 +} + function constructParticleStyle(particle){ + console.log(getOpacity(particle)) return { left: (particle.x - particle.height/2) + 'px', top: (particle.y - particle.height/2) + 'px', width: particle.width + 'px', height: particle.height + 'px', transform: "rotate(" + particle.angle + "deg)", - opacity: ((particle.time < particle.fadeTime) && particle.fadeTime) ? particle.time / particle.fadeTime : 1, + opacity: getOpacity(particle), "pointer-events": (particle.onClick || particle.onHover) ? 'auto' : 'none', - + "background-image": "url(" + particle.image + ")", } } function clearParticles(check) { - if (!check) check = true + if (!check) check = true for (p in particles) { - console.log(run(check, particles[p], particles[p])) if (run(check, particles[p], particles[p])){ Vue.delete(particles, p) } diff --git a/js/technical/systemComponents.js b/js/technical/systemComponents.js index 640c5db..b653c89 100644 --- a/js/technical/systemComponents.js +++ b/js/technical/systemComponents.js @@ -191,9 +191,9 @@ var systemComponents = { 'particle': { props: ['data', 'index'], - template: ` - + template: `
+
` }, diff --git a/popup.css b/popup.css index e981706..c66835e 100644 --- a/popup.css +++ b/popup.css @@ -47,5 +47,6 @@ background-color: transparent; display: block; position:absolute; - z-index: 99999 + z-index: 99999; + background-size:contain; } \ No newline at end of file