Creating a poly with tile image inside

[magic]

Hi all,

For 2D game: Do you have any suggestions on how to fill the polygon with a tile image?

 

[MikeHart]

With graphics module are we talking about? Mojo or Mojo2

 

[magic]

I prefer Mojo, but its ok to go for Mojo2

 

[MikeHart]

In mojo a Polygone can not be texture.
In mojo2 you can. But I am uncertain if you can achieve the textural effect, repeating texture, you want.

 

[Wingnut]

I'm thinking maybe you could use multiplication blend or a shader to mask normal draw operations?
Holzkopf I know have tried this kind of things before using Mojo2 here in the forum.

 

[Wingnut]

Otherwise you could check this code out don't know who made it originally but it might be interesting to you.

 

[magic]

In mojo2 you can. But I am uncertain if you can achieve the textural effect, repeating texture, you want.

Tq Mike. I could probably repeat the texture by code.

Otherwise you could check this code out don't know who made it originally but it might be interesting to you.

This definitely helps me to figure it out.

I'm thinking maybe you could use multiplication blend or a shader to mask normal draw operations?
Holzkopf I know have tried this kind of things before using Mojo2 here in the forum.

Oh Yes, I could try Holzkopf module Thank you for pointing me in the right direction

 

[magic]

Hi, I want to learn OpenGL in CerberusX, but the doc for OpenGL warper is too simple, and I cannot understand it. Could you point to any link for me to know more about OpenGL implementation to CerverusX?

Or, if you got time, you can demonstrate a simple OpenGl triangle draw with tile texture in it. That would be an excellent start for me.

I'm interested in doing a polygon game in 2D and hoping that OpenGL can help me do polygon stuff easily. For example, drawing a polygon with tile texture inside it is tricky for me, even in mojo2.

Empty code for OpenGL:

Strict
'#OPENGL_DEPTH_BUFFER_ENABLED=True
#OPENGL_GLES20_ENABLED=True
Import mojo2
Import opengl.gles20
Function Main:Int();New myClass;Return 0;End

Class myClass Extends App
    Method OnCreate:Int()
        SetUpdateRate(30)
        Return 0
    End
    Method OnUpdate:Int()
        Return 0
    End
    Method OnRender:Int()
        glClearColor(0,0,0,1)
        glClear(GL_COLOR_BUFFER_BIT)
        '----------------------------
        '
        ' OpenGL code here
        '
        '----------------------------
        Return 0
    End
End

 

[MikeHart]

I will get back to you about it as soon as possible.
Just a pre hint, mojo2 uses opengles 2.

 

[magic]

I will get back to you about it as soon as possible.
Just a pre hint, mojo2 uses opengles 2.

Thank you for the hint.

By looking at several sample code, I managed to create a poly with flat color now but still struggled to add a texture. If anyone can help with applying tile texture, it will be helpful. Thanks

#OPENGL_GLES20_ENABLED=True
Import opengl.gles20
Import mojo2
Function Main:Int();New myClass;Return 0;End

Class myClass Extends App
    Method OnCreate:Int()
        SetUpdateRate(30)
        Print glGetString(GL_VERSION)
        CreateShader("attribute vec4 position;void main(){gl_Position = position;}","void main(){gl_FragColor = vec4(1.0,0.0,0.0,1.0);}")
        DrawPolygon([-0.5,-0.5, 0.0,0.5, 0.5,-0.5])                       
        Return 0
    End
    Method OnUpdate:Int()
        Return 0
    End
    Method OnRender:Int()
        glClearColor(0,0,0,1)
        glClear(GL_COLOR_BUFFER_BIT)       
        glDrawArrays(GL_TRIANGLES,0,3)
        Return 0
    End
End

Function CheckGL()
    Local err=glGetError()
    If err Error "GL Error "+err
End
Function CreateShader(vertexGLSLCode:String,fragmentGLSLCode:String) 'Parameter needs GLSL code for both vertex and fragment shader

    Local program = glCreateProgram()

    'create vertex shader
    Local vertexshader = glCreateShader(GL_VERTEX_SHADER)
    glShaderSource(vertexshader,vertexGLSLCode)
    glCompileShader(vertexshader)
    Local params:Int[1]
    glGetShaderiv(vertexshader,GL_COMPILE_STATUS,params)
    If Not params[0] Print "Failed to compile vertexGLSLCode: "+glGetShaderInfoLog(vertexshader)
   
    'create fragmen shader
    Local fragmentshader = glCreateShader(GL_FRAGMENT_SHADER)
    glShaderSource(fragmentshader,fragmentGLSLCode)
    glCompileShader(fragmentshader)
    glGetShaderiv(fragmentshader,GL_COMPILE_STATUS,params)
    If Not params[0] Print "Failed to compile fragmentGLSLCode: "+glGetShaderInfoLog(fragmentshader)

    'compile it   
    glAttachShader(program,vertexshader)
    glAttachShader(program,fragmentshader)
    glLinkProgram(program)
    glGetProgramiv program,GL_LINK_STATUS,params
    If Not params[0] Print "Failed to link program:"+glGetProgramInfoLog( program )
    glValidateProgram(program)
    glDeleteShader(vertexshader)
    glDeleteShader(fragmentshader)
    glUseProgram(program)
    CheckGL()

End
Function DrawPolygon(poly:Float[])

    'convert poly to DataBuffer to send to gpu
    Local data:=New DataBuffer(poly.Length*4)
    For Local i:=0 Until poly.Length
        data.PokeFloat (i*4),poly[i]
    Next
    
    'create buffer in gpu and send above data       
    Local vbo=glCreateBuffer()
    glBindBuffer(GL_ARRAY_BUFFER,vbo)
    glBufferData(GL_ARRAY_BUFFER,data.Length,data,GL_STATIC_DRAW)
   
    'tell gpu about the arrangement of our buffer
    glEnableVertexAttribArray(0)
    glVertexAttribPointer(0,2,GL_FLOAT,False,8,0)
    glBindBuffer(GL_ARRAY_BUFFER,0)
   
End

Output code:

 

[MikeHart]

Sorry, didn't had time so far.

 

[MikeHart]

@magic Did you saw the mojo2/gles2cube demo?

 

[magic]

Yes Mike but I can't really understand it

 

[MikeHart]

Ok. Then I need to create a simple example.

 

[Phil7]

@magic Regarding your texture tile. Do you only need one texture that is repeating vertically and horizontally or do you want to extend that at some point?

 

[magic]

@Phil7, I'm thinking of repeating it vertically and horizontally no end.

This can be used to create a game ground with several types, such as grass, sand, stone, water, etc. We can draw all the layers by poly which can be generated in 2d or 3d cad. Usually, people use TILE to create levels. But I'm thinking of creating levels using polygon drawing, but I need a poly that can be filled with texture to make it look good.

I imagine something like this:

 

[Phil7]

It's not that simple to implement it in Mojo2. First thing that is not sufficient at the moment is that DrawPoly only draws convex polys. The other thing is that we would need to set parameters for the texture to repeat it like that. In OpenGL it is called GL_REPEAT or GL_MIRRORED_REPEAT, but you might also need a way to scale the size in which your texture is drawn.
At the moment I don't have time for this, but it's an interesting thing.

 

[MikeHart]

@Phil7 this is not about an implementation in mojo2.

He just wants to know how to texture a triangle in OpenGlES. Looking at his example, he needs to develop stuff for concave polygons and also multi textures.

 

[Phil7]

@MikeHart You are right. Initially the thread seemed to be about any solution for this problem. And doing it with pure OpenGLES could be a bit of an overkill, so I looked if there could be a simple implementation.

 

[Phil7]

Now I had some time to tinker with this again. You can use a new Method DrawTriangleFan() to draw a simple polygon with a texture. You can move and scale the texture.
Just replace graphics.cxs in modules/mojo2 with the attached one and try the example.

Happy Easter!

' Cerberus X - Drawing Polygon using DrawTriangleFan() with Texture

Strict

Import mojo2


Function Main:Int()
    Print "Press left mousebutton to set triangle-fan vertices."
    Print "Press space-bar to toggle visibility of the vertex wireframe."
    Print "Press Escape to reset vertices."
  
    New MyApp()
  
    Return 0
End


Class MyApp Extends App

    Field myCanvas:Canvas
    Field grabbed:Bool
    Field material:Material
    Field verts:Float[]
    Field vList:FloatList
    Field texcs:Float[]
    'Field img:Image
    Field isWireframeEnabled:Bool = True
  
  
    Method OnCreate:Int()
        vList = New FloatList()                       
        myCanvas = New Canvas()
      
        'Flags for Texture wrapping are: ClampST, MirroredRepeatST, RepeatST (S and T are horizontal and vertical dimensions)
        'Image/Texture needs to be sized in power of two for repeating. At least on html5 Target.
      
        material = Material.Load("eggs.png", Texture.RepeatST|Texture.Filter|Texture.Mipmap, Null )
        'img = Image.Load("eggs.png", 0.5, 0.5, Image.RepeatST|Image.Filter|Image.Mipmap)
        Return 0     
    End
  
      
    Function DrawWireframe:Void(myCanvas:Canvas, verts:Float[])
        myCanvas.SetLineWidth(2.0)  ' Seems not to work on html5 Target.
        Local circleSize:Float = 5.0
      
        For Local i:Int=2 Until verts.Length() Step 2         
            myCanvas.SetColor(0,0.8,0)
            myCanvas.DrawLine(verts[i-2], verts[i-1],verts[i], verts[i+1])
            myCanvas.DrawLine(verts[0], verts[1],verts[i], verts[i+1])
            myCanvas.DrawCircle(verts[i], verts[i+1], circleSize)
        Next
        If verts.Length()>=2
            myCanvas.SetColor(0.8, 0, 0)
            myCanvas.DrawCircle(verts[0], verts[1], circleSize)
        EndIf
    End
  
  
    Method OnRender:Int()
        myCanvas.Clear(.1, .1, .1)
                          
        myCanvas.SetColor(1.0, 1.0, 1.0)
        myCanvas.DrawTriangleFan(verts, material, MouseX(), MouseY(), 1.5, 1.5)
        'myCanvas.DrawTriangleFan(0, 0, verts, img, MouseX(), MouseY(), 1.5, 1.5)

        If isWireframeEnabled DrawWireframe(myCanvas, verts)

        myCanvas.Flush()
        Return 0
    End
  
  
    Method OnUpdate:Int()
        If MouseHit(0)
            vList.AddLast(MouseX())
            vList.AddLast(MouseY())
            verts = vList.ToArray()
        EndIf
      
        If KeyHit(KEY_SPACE)
            isWireframeEnabled = Not isWireframeEnabled
        EndIf
      
        If KeyHit(KEY_ESCAPE)
            verts = []
            vList.Clear()
        EndIf
      
        Return 0
    End

End