Create a slash effect using image and progressively drawing - c#

What I want
To create an effect like an slash in my 2D project. For that, I've an image in my assets already, and I want to draw it from top to the bottom, allowing it to be drawn in maybe half a second, progressively.
The idea is to draw it to create the effect of the slash itself, and the progressively mode is to "fit" the slash image itself, imagine the first one of the following link, that would be drawn from left to right.
To achieve that kind of drawing, the only thing that I've found is fillAmount for an Image, combined with the fillMethod.
The problem
The problem is that these methods are for the Image class, that it's not recommended for game drawing but only for UI.
Anyway, I've tried to do it this way, and I've not been able to do it, because the Unity environment didn't let me drag&drop my slash asset into the Image variable that I had created into my script. I thought that it may be because of the type of import, but also trying to import it with the other options resulted in nothing better.
The questions
Just answering one of these questions would solve my situation (or I think so):
How can I make Unity accept my image/asset into my Image object in the script?
Another way to create such effect using Sprite or GameObjects directly?

Method 1: You can use sprite sheet to create a 2D animation
1-1. Prepare a splash effect sprite sheet (an image map contains continuous action image), like
1-2. Change the sprite mode to multiple in inspector window
1-3. Slice the sprites in sprite editor
1-4. Multi-select the sprites and drag into hierarchy window, Unity will ask you to save this animation
1-5. You will get an animation GameObject
Method 2: If you can make it like a circular progress bar, check Radial/ Circular Progress Bar in unity3d

Related

Why is Unity Canvas Image always rendering over my gameObjects even though it is definitely behind them?

In my 2d Unity project, I have a Canvas with an Image that I want for a Background.
I have 2 gameObjects in front of this background. But no matter how much fiddling I do with Pos Z, Sorting Layers, or hierarchy sorting, the image is always in front of the objects.
Gif above shows in 3d mode that even though the image is clearly behind these objects, it will always appear over them if they overlap.
Hierarchy:
Main
Camera (Inspector: https://i.imgur.com/Q5a52cf.png)
BackgroundCanvas (Inspector: https://i.imgur.com/m9Pxr6B.png)
BackgroundImage (Inspector: https://i.imgur.com/jTx7pEW.png)
Object1 (Inspector: https://i.imgur.com/YcClEhk.png)
Object2
Any advice to rescue me from this madness is much appreciated.
Set the sprite renderer's transform z value to 0 instead of 100
If that does not solve, please specify camera properties also, so I can try to recreate the exact setup.
Try clicking on Layers -> edit layers, inside sorting layers you can change the order grabbing layer, everything upper appears behind in the camera.
You could create a layer called Object
Assign it to the game objects.
Create an object camera
culling mask -> object layer
depth bigger than you current main camera.
Set it to Projection -> Orthographic
Clear flags -> solid colors.
canvas Render Mode -> Screen Space - Camera and assign the Render Camera to be the Object Camera
Inspector tab of the object or background.
Sprite Renderer.
Additional Settings.
Sorting Layer.
change it to a different layer.
Had this same issue and was able to fix it with these steps:
In canvas settings change Screen Space Overlay to Screen Space Camera
Set the camera variable to the one you are using for your scene.
I figured out a workaround. I basically created a VisualElement inside the UI Builder and set a render texture to the background. Then I added an extra camera to my project to view all the sprites that needed to be on top. That camera feeds the render texture, so now everything that camera sees is forced to be on top of the UI Document as the background of that VisualElement. If you want control over the whole screen, just set the VisualElement position to absolute and max out its dimensions. If your game doesn't have a fixed aspect ratio it might cause some stretching, but other than that I cant really tell the difference. Sorting layers for the UI Documents are broken and unity needs to work on that. This is the best option I've found. Hope this helps.
I had the same problem and I fixed it by attaching the camera to the canvas which is screen space and finally changing the sorting layer of my object to -1.

How to make UI and Text effect in unity?

I need to make my UI and Text appear like this in Unity
Kinda lost, don't know how to do this.
That is combination of two things:
Glowing image. Which move over button.
Button's image.
"Image Type": Filled.
"Fill Method": Horizontal.
and some other settings Here is the reference image.
Animations:
For animation of glow and image fill you could use unity animation and animator but i think that will be over kill for such process so i will suggest to use tween plugin like DoTween (My personal Best, Free), ITween (Free), HoTween(Free), Easy Tween(Not Sure) etc.
Arrangement:
Arrangement of this is easy and can be achieve like this:
Button game object having child game object with image component.
Then moving glowing game object over button.
If you need more information about animation and tween plugins or anything relevant to this then let me know...
I Hope this will help.

Unity - How to combine sprites into one

I want to make RPG game using Unity2d with the tile feature to draw the game map.
I created a new class inherited from UnityEngine.Tilemaps.Tile and overrided void GetTileData.
In void GetTileData I determine the sprite to show for each tile according to the tile's neighbors.
See the image below. The source image is input from the inspector. The input is only one image like this below. I don't want to make massive input images caus that totally mess up.
But then I have a problem. When in the game I have to extract certain blocks from the source image and combine them into a new sprite to show onto the map as a tile sprite.
Just want to know, if I have the 4 rectangles known, and want to combine them into a sprite like the image above, how can I do that?
There is no easy way to do what you want in code. Simply use a tilemap with smaller base tiles.

Optimal 2D Tile rendering in C#

So I'm making a simple 2D Sidescrolling game in C# however I've found that using Graphics.drawImage doesn't particularly allow me to update the tiles as I wish. For example, I tell it to draw the image and it stays where I tell it to be. I want to be able to move the entire scene left to right. This would be easier if I had to use a for loop or something and define it's position every time it draws the image.
This may be confusing and I'm certain there's a way of doing it, I just don't know how.
So my question to you is: How can I control the positioning of each rectangle drew on a form so that I can scroll the entire scene to the left when I wish?
I'm certainly no game/graphics expert, so take this with a grain of salt.
A couple things spring to mind.
First, you could pre-render the entire level as one bitmap, then just paint the relevent portion into your picturebox.
Second, the Graphics class has a Transforms property (I may have the name wrong). You could add a linear transformation to the graphics object so the painting coordinates of your tiles wouldnt change, but the graphics object would slide, or I think the graphics term is "translate" the output en-masse.

How best create a game map in silverlight

I'm looking for some idea's on how to create the 2d layout (walk path) of a game.
The tiles will be 32x32 pixels aswell as the character moving on the tiles.
I've thought of two ways currently, havn't tried any of them out yet.
The game will be shown in a window of about 400x300 or 512x356 something.. not much bigger than that where the game map itself could be bigger then 1000x1000. So only a portion of the map will be visible most times.
So here's my 2 options as far as I've thought of them.
[1]: Create the entire map at the start (which might increase the loading times but it will make it more easy to move the map around) including each object, player, enemies etc etc.
[2]: Create only the map seen and 1 tile around it (which is not visible) so I can make that one visible with a story board and remove the row / column which is out of bounds and create a column again.
Which means, If I have a room of 5x5 tiles, and I load 7x7 tiles. If I move right, I move all the tiles left and keep the player in the middle of the screen. Then I remove the far left set of tiles and create a new set of tiles on the right side, which will hopefully be done before the storyboard has finished moving.
In the second method all I have to consider is objects that are larger then 32x32. How could I best react on those.. However, this is a problem I'd like to address later.. Right now I prefer to know people's opinions and possible better methods.
I do apoligize if this question is no apropriate for stackoverflow.
Just be careful with the "load" word. Loading, means taking the data from the disk/drive and putting it memory. For that, you should load all the current world/map at once, before the game start. Trust me, you don't want to get yourself in dynamic loading stuff while the map is running.
But you only need to load the definition of your map, you don't need to create the instance of the object at that point. So you can create the instance from the map definition as the player walks... but are you really that constraint in memory? I can understand that for a game like Minecraft or Terraria where the map contains virtually millions of tiles... But for 32x32, you can consider making them all when you load the definition.
Of course, whatever the solution, you should only draw/compute/collide/update the tiles that are visible on screen.

Categories

Resources