• Dear Cerberus X User!

    As we prepare to transition the forum ownership from Mike to Phil (TripleHead GmbH), we need your explicit consent to transfer your user data in accordance with our amended Terms and Rules in order to be compliant with data protection laws.

    Important: If you accept the amended Terms and Rules, you agree to the transfer of your user data to the future forum owner!

    Please read the new Terms and Rules below, check the box to agree, and click "Accept" to continue enjoying your Cerberus X Forum experience. The deadline for consent is April 5, 2024.

    Do not accept the amended Terms and Rules if you do not wish your personal data to be transferred to the future forum owner!

    Accepting ensures:

    - Continued access to your account with a short break for the actual transfer.

    - Retention of your data under the same terms.

    Without consent:

    - You don't have further access to your forum user account.

    - Your account and personal data will be deleted after April 5, 2024.

    - Public posts remain, but usernames indicating real identity will be anonymized. If you disagree with a fictitious name you have the option to contact us so we can find a name that is acceptable to you.

    We hope to keep you in our community and see you on the forum soon!

    All the best

    Your Cerberus X Team

Creating a poly with tile image inside

mag

Active member
3rd Party Module Dev
3rd Party Tool Dev
Joined
Mar 5, 2018
Messages
261
Hi all,

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

poly.jpg
 
Last edited:
I prefer Mojo, but its ok to go for Mojo2
 
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.
 
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.
 
Otherwise you could check this code out don't know who made it originally but it might be interesting to you.
 

Attachments

  • example.zip
    12.9 KB · Views: 88
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
 
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:
Code:
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
 
I will get back to you about it as soon as possible.
Just a pre hint, mojo2 uses opengles 2.
 
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

Code:
#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:
Annotation 2022-02-06 215717.jpg
 
Yes Mike but I can't really understand it
 
@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?
 
@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:
Untitled-1.jpg
 
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.
 
  • Like
Reactions: mag
@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.
 
  • Like
Reactions: mag
@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.
 
  • Like
Reactions: mag
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! :)

1650267290827.png

Code:
' 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
 

Attachments

  • graphics.cxs
    77.1 KB · Views: 66
  • eggs.png
    eggs.png
    3.9 KB · Views: 72
Back
Top Bottom