Question about DrawTrianglesShader #3

Carlosdpd · 2024-10-05T19:13:52Z

Carlosdpd
Oct 5, 2024

Hello! First of all, I really appreciate the work behind this repo, I can see that there is a lot of effort behind it!
I do have a question regarding DrawTrianglesShader... Since my sprites are being loaded like this:

var currentMap = ebiten.NewImageFromImage(g.CurrentMapImage)

I have been doing operations like:

matrix.GeoM.Translate(-c.PositionX, -c.PositionY)

And then applying them to the Image (So the player moves and the camera is centered, for example)
So, lets say my shader is being correctly rendered (I can see the changes in the image) but the shader gets drawn on top of my previous call:

screen.DrawImage(currentMap, transformationMatrix)
screen.DrawTrianglesShader(g.vertices[:], indices, g.Shader, &shaderOpts)

So can't actually set the screen to translate accordingly to my players position... What am I missing?

tinne26 · 2024-10-05T20:43:53Z

tinne26
Oct 5, 2024
Maintainer

I don't quite understand what are you trying to explain. This is what I'm understanding:

You load a big map image. Ok.
I assume that c is the camera, so you translate the map by (-camera.X, -camera.Y), which means that if the camera is moving right, for example, this is like the map scrolling towards the left. This part also makes sense.
Then after this you try to draw some additional elements with DrawTrianglesShader, but I don't understand which elements are you drawing, which triangles, nor whether the shader options have any important fields set, etc. And you still say the problem is with translating the screen, but I don't know what the screen has to do with anything, as the screen should not be translated at any point (the screen that you receive on Draw is a target image, not a source).

3 replies

Carlosdpd Oct 6, 2024
Author

Yes, point 1 and 2 are correct, I will attach here my full draw method:

func (g *GameState) Draw(screen *ebiten.Image) {
	var currentMap = ebiten.NewImageFromImage(g.CurrentMapImage)

	// shader from github example starts
	// map the vertices to the target image
	bounds := currentMap.Bounds()
	g.vertices[0].DstX = float32(bounds.Min.X) // top-left
	g.vertices[0].DstY = float32(bounds.Min.Y) // top-left
	g.vertices[1].DstX = float32(bounds.Max.X) // top-right
	g.vertices[1].DstY = float32(bounds.Min.Y) // top-right
	g.vertices[2].DstX = float32(bounds.Min.X) // bottom-left
	g.vertices[2].DstY = float32(bounds.Max.Y) // bottom-left
	g.vertices[3].DstX = float32(bounds.Max.X) // bottom-right
	g.vertices[3].DstY = float32(bounds.Max.Y) // bottom-right

	// set the source image sampling coordinates
	srcBounds := currentMap.Bounds()
	g.vertices[0].SrcX = float32(srcBounds.Min.X) // top-left
	g.vertices[0].SrcY = float32(srcBounds.Min.Y) // top-left
	g.vertices[1].SrcX = float32(srcBounds.Max.X) // top-right
	g.vertices[1].SrcY = float32(srcBounds.Min.Y) // top-right
	g.vertices[2].SrcX = float32(srcBounds.Min.X) // bottom-left
	g.vertices[2].SrcY = float32(srcBounds.Max.Y) // bottom-left
	g.vertices[3].SrcX = float32(srcBounds.Max.X) // bottom-right
	g.vertices[3].SrcY = float32(srcBounds.Max.Y) // bottom-right

	// triangle shader options
	var shaderOpts ebiten.DrawTrianglesShaderOptions
	shaderOpts.Images[0] = currentMap
	indices := []uint16{0, 1, 2, 2, 1, 3} // map vertices to triangles

	// shader from github example ends

	transformationMatrix := &ebiten.DrawImageOptions{}

	g.camera.Draw(transformationMatrix) // translate by cameraX, cametaY

	screen.DrawImage(currentMap, transformationMatrix) // render translated map
	screen.DrawTrianglesShader(g.vertices[:], indices, g.Shader, &shaderOpts) // this shader overwrites the previous DrawImage

Exactly, as your said I'm translating the currentMap... But I also want to apply the shader to currentMap

tinne26 Oct 7, 2024
Maintainer

There are multiple things you are doing wrong:

If you want to render only part of your map, you can't use the whole bounds of the map image, because this will make the shader project the whole map to the screen area. This tutorial goes into more detail on texture mapping: https://github.com/tinne26/kage-desk/blob/main/docs/tutorials/triangles.md, but the key point is that using srcBounds := currentMap.Bounds() doesn't really makes sense if you are trying to draw the currently visible part of the map on screen.
Using DrawImage and then DrawTrianglesShader to draw the same thing again is usually very suspicious. Normally, you would only have DrawTrianglesShader, and your shader would draw the map alongisde any effects you are applying to it, not draw "the thing" and then "the thing again with effects".
Normally you don't even draw a massive map image. What you typically do is have a map made of smaller parts, typically tiles, and only render the relevant ones. Even if there are some exceptions to this, you basically always want to partition your space and work only with the elements in view. This isn't really relevant for the shader, though, it's just a general consideration.

Carlosdpd Oct 8, 2024
Author

I understand.
Thanks a lot for the detailed answers and tips! (Let me know if you want to keep the discussion open in case someone is trying to do something similar)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Question about DrawTrianglesShader #3

{{title}}

Replies: 1 comment 3 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Question about DrawTrianglesShader #3

Carlosdpd Oct 5, 2024

Replies: 1 comment · 3 replies

tinne26 Oct 5, 2024 Maintainer

Carlosdpd Oct 6, 2024 Author

tinne26 Oct 7, 2024 Maintainer

Carlosdpd Oct 8, 2024 Author

Carlosdpd
Oct 5, 2024

Replies: 1 comment 3 replies

tinne26
Oct 5, 2024
Maintainer

Carlosdpd Oct 6, 2024
Author

tinne26 Oct 7, 2024
Maintainer

Carlosdpd Oct 8, 2024
Author