So, I have been working in Unity but I've decided it's time to change to something I know better: JavaScript. I've been considering switching to Phaser.js but I have some questions regarding an issue I've been having even in Unity and that I found no solution to at the moment while searching on the internet. I have no code to provide as I haven't yet started actually programming in Phaser, so I'll try to be explicit.
My game idea basically revolves around some lights that change colors. The sprites I have for the lights look identical, but just with different colors, but not entirely (only parts of them are colored differently). The problem is that my game has many different colored lights and it has to change between them. Like, if one light is red and you click on it, it becomes green, for example. Creating and loading so many sprites that look almost the same seems like a bad practice, and I wonder if there is a way to change the color of a sprite or a part of the sprite by code. I know that Phaser doesn't support svg and that svg in games is a bad idea in general because of performance issues but it would have saved me a lot of time to just add the generated svg code of the sprites I use and just change the fill of the parts I want.
So, my question is: what are the best alternatives (if any) to using multiple sprites or how can you change the color of specific parts of them?
Another alternative, depending upon your light sprites, is to use Phaser's tinting capabilities.
Both sprites and images in Phaser can be tinted, and since Phaser supports sprite grouping, even if you wanted to change only a part of the image you could easily have each displayed object consist of two sprites, one of which is the same for all lights (the part that doesn't change) and another that is also shared, but tinted.
Phaser 3 example of tinting an image:
this.add.image(300, 300, 'pixel').setTint(0xff0000);
Phaser 3's setTint() documentation.
Phaser 2 CE example of tinting a sprite, in case you're looking at using this version:
sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'atlas', 'greenJellyfish0000');
sprite.tint = Math.random() * 0xffffff;
If the lights don’t have to move, then you can just have a few images and change their src’s. Alternatively, I believe you could have it so that when the sprite is clicked it changes to a different looking animation. That is, after all, the point of a spritesheet, isn’t it?
Related
Problem
Hi,
So I have noticed that software like Microsoft Edge and OneNote and Notability, store hand drawn strokes as vector curves or lines. They also provide the ability to erase strokes, by dragging the eraser over them.
I wanted to implement something similar in my software, an SVG Animation and Creation bundle, and I have come up with the logic for the freehand stroke to SVG curve, a demo is available here:
https://phantomzback.github.io/SvgFreehandDrawDemo/polylineTest.html
It uses the polyline tag with the cursor positions, and path simplification is something I also plan to implement. But before that, I need a way to detect if the eraser has gone over the stroke. I have an approach but I am not sure how great of an approach it is. I'd appreciate advice on how this can be improved or alternative methods to tackle the problem.
Current Idea
Find the pixels where the stroke is rendered, and save it in an array. Then, check for if the eraser tool is active and goes over that stroke. If it does, delete this stroke.
Finding the pixels shouldn't be very hard since a polyline is a bunch of points and lines drawn between them. But I plan on adding support for paths later, for which a better approach might be needed.
Thanks in advance!
I have been looking at Epic Games' Fortnites Website and I am trying to figure out how they achieved the 3D effect on the page:
Epic Games' Fortnite website - scrolled down to 3rd slide
Does any one have any idea how to do it? I would really like something similar to a project I'm working on. I have found Three.js, but I am quite sure that is not the solution they went with.
For these types of questions, i can only recommend to install spector.js and have a look yourself. In short: everything you see is 100% faked.
I mean, that's always the case. In fact, if you want to build something like that, your first question should always be: how much of this can I fake and still get away with that?
In this example, it turns out: everything. Just open the devtools and click through all the assets in the network-tab. You will find these two textures:
looks familiar, right?
So what they appear to be doing is they are using three.js with some custom shaders to handle the translations, the flickering of the lights and the highlighting. These effects are computed using the normal-map and an additional mask-texture which I couldn't quite figure out what it does. But again, if you look at the scene in spector.js you can see the shaders used for every drawcall.
The only thing that is a bit more complex is the little robot-friend in the bottom left corner. But again, it's not 3d as in meshes and so on but rather a set of flat textured quads running a bones-animation thing.
I think that makes it a really great website after all.
Given that epic is building the unreal-engine I would suspect the original renders were done there. And I agree, the lighting looks really amazing :)
It is a simple parallax effect using animated sprite sheets.
Parallax effect is achieved by using several layers of images/video on top of one another in different Z-depth.
You can achieve the moving part by using the mousemove event to track the cursor.
In Flixel, you cannot add a FlxSprite to another one, like you could with Flash API (Sprites were subclasses of DisplayObject). So if you want 2 Sprites to behave like parent and child, you still have to animate them separately. This can become a nightmare if you use Tweens too.
For example, imagine a rotating spaceship that has attached thrusters, or a moving character that wears an armor, hat, shield etc.
Is there a way to have a 'child' Sprite acting like it was added into a 'parent' one, so that it updates automatically its position, scale and rotation accordingly? For example, during their FlxGroup's update() function?
I'm interested in HaxeFlixel 3.3.1, although it doesn't really matter, as this applies for all versions and ports of Flixel.
Edit: I noticed that HaxeFlixel features FlxSpriteGroup, which is supposed to handle the multiple Sprites. But this is a new feature, and I'm pretty sure that flixel developers are using different approaches for the rest of the flixel ports.
There's a limited version of this available using: http://api.haxeflixel.com/flixel/addons/display/FlxNestedSprite.html
HaxeFlixel provides FlxSpriteGroup and FlxNestedSprite which both can be used to have some sprites behaving as a group. In both approaches, I had a problem updating the angle and scale properties, however updating the position seems to work fine.
If you are not interested to animate the sprites separately, and painting one sprite over another is what you're after, FlxSprite's stamp() function could be what you need (e.g. draw a helmet over your character)
Having read the SVG2 draft, I am slightly disappointed to learn that there will be no new line caps than the standard 3. The new arc line join is brilliant however, but not what this question is about (I just wanted to mention that).
I had been hoping for a cap that ends in a triangle. But given my use case, that might not be ideal either.
As far as I can gather, Adobe Illustrator - which I do not use myself - allows the width of a stroke to be variable. This is useful when drawing from a drawing tablet, to highlight the pressure of the lines. It's true, this functionality exists in many bitmap drawing programs, but is there a way to achieve this effect in SVG, without having to draw multiple lines?
The idea is that each node should have a width, and the lines should then 'smoothly' scale the width between each node that had a different width.
Is this possible? And if not, could it be considered?
P.S. I should point out, that this is more a thought experiment and an idea than something that hinders my process. More of a nice to have than need to have.
While this may not be a true answer (SVG standard wise at least), it turns out that in the current trunk version of Inkscape, this feature called PowerStroke already exists. There are some screenshots of PowerStroke.
This should satisfy my quest for the time being.
It turns out - as well - that the arc line joins was actually suggested by Inkscape as well, they are just called extrapolate in Inkscape.
I'm working on a game using OpenGL displaying sprites, i.e. 2d quad-mapped graphics with no projection, that will be displayed on several different resolution screens. (i.e. iPhone retina/non-retina, iPad.. my next project the problem will expand to desktop resolutions which are far more numerous)
I'm OK with handling different aspect ratios, that can be handled by opengl and my placement of the sprites. I'm also OK with slightly different resolutions - use same art and either border the screen, or display a little bit more info.. but when things start to grow/shrink by like 50%+ it's a major issue.
What is standard procedure for generating the art assets in this situation? Generate for the largest resolution and just let OpenGL worry about resizing during it's rasterizing, or do people generate art sets for each main resolution?
Rasterized sprite art tends to get ugly when it's stretched (interpolated), so I'm concerned.. but generating different sizes really means for practical purposes I have to go with vector drawings and export several resolutions. Limits the artist and is somewhat complicated as far as loading and managing the assets
(Yes, I can "just try it" to an extent, but I already have an idea of the results. I'm looking for solutions people use and angles I maybe wouldn't have thought of. This question does have an answer(s) it's not subjective or lazy)
You are correct that scaling bitmaps tends to make sprites bad. There are a couple of ways of dealing with that:
Draw them (pixelart) at all required resolutions. That is a lot of work but gives you full control.
Draw them (vectors) and render them at all required resolutions. Less work but scaling up or down beyond 50% or 200% might give bad results.
Draw them (3D appliction) and render them at all required resolutions. Quite some work but a very consistent set of sprites.
For each of these options you are free to post-process the bitmaps to clean them up or add details but if you do this for options 2 and 3, you are breaking the chain and will have to apply the changes again when rendering the same set again.
An other option is to limit the variation of resolutions.
As far as I know it is very common in the (game) industry to make all (or the most used/visible) sprites as pixel perfect as possible. This is what they pay the artists for...