The libRocket GUI library

[Radikalizm]

I've been looking into some GUI libraries, since I think writing my own custom GUI library for both my irrlicht framework and my own engine would sidetrack me too much and would stall more important development aspects

I stumbled upon libRocket ( http://libRocket.com ) which uses HTML and CSS specifications for designing their GUI (an idea which I really like), and I'm considering on doing some prototypes with it to see whether I like it or not

I haven't had the time to play with it yet since I have exams and all atm, but if anyone here has ever tried it or used it in a project and has any experiences to share, they're always welcome to post them

[serengeor]

I haven't used it myself though it really would like to see it working in irrlicht.
But I'm not that much interested into making my first game with fancy UI or with next gen graphics then I'm interested into making it to work..

I know old irrlicht user that has used it in his game, there it is:http://www.gamedev.net/blog/490-journal-of-trefall/

I think he posted about some troubles he had with it, you may find it useful(or not).

[serengeor]

I've been trying to implement it in irrlicht but i've failed at doing so
Here's the best result I can get:
It's in 3d because I couldn't get it to display anything in 2d.

If anyone knows what could be wrong please tell me
(I can upload the code if needed)

[Radikalizm]

I had started work on it myself, but started to absolutely hate the architecture of the thing, so I abandoned it
I'm sorry I can't be of any more help

[serengeor]

I had started work on it myself, but started to absolutely hate the architecture of the thing, so I abandoned it
I'm sorry I can't be of any more help

I see, I didn't like the way of doing things with it either. I think I'll just rewrite irrlicht's gui a bit to suite my needs

[Radikalizm]

I had started work on it myself, but started to absolutely hate the architecture of the thing, so I abandoned it
I'm sorry I can't be of any more help

I see, I didn't like the way of doing things with it either. I think I'll just rewrite irrlicht's gui a bit to suite my needs

I'm considering writing a GUI system from scratch, something which could eventually be ported from my engine to irrlicht as well, based on the principle which libRocket is using (ie. HTML and CSS-based layouts with scripting possibilities); I did a blog post about it on my site about 2 weeks ago, and I believe I still have a basic HTML-parser which I wrote some time ago lying around here somewhere (would need some cleanup though)

It's still something I'm researching, I have other priorities now and at the moment I can manage just fine without an extensive GUI system, but if anyone's interested I'd be willing to share some code once I get to the actual implementation

[hendu]

HTML parsing is hard, javascript even more so. Unless there's a good reason, I'd believe embedding webkit would prove much faster (in developer time).

[Akano]

I have done a libRocket integration for our new project. It was really tricky and had cost me 2 days to figure out how it can be done.

Finally i have reversed the indicies my own and it worked. As i think you can figure out the rest your own, here is the code snipet thats doing the magic in the RenderGeometry function:

Code: Select all

 
        short* new_indicies = new short[num_indices];
        for(int i=0; i<num_indices; i++)
        {
                new_indicies[num_indices-i-1] = indices[i];
        }
 
        m_pDriver->setMaterial(meshBuffer.getMaterial());
        m_pDriver->draw2DVertexPrimitiveList(meshBuffer.getVertices(), meshBuffer.getVertexCount(), new_indicies, num_indices/3);
 

Edit:
Just forgotten to mention, i needed to modify the driver to have access to Scissor functions.

[serengeor]

I have done a libRocket integration for our new project. It was really tricky and had cost me 2 days to figure out how it can be done.

Finally i have reversed the indicies my own and it worked. As i think you can figure out the rest your own, here is the code snipet thats doing the magic in the RenderGeometry function:
***
Edit:
Just forgotten to mention, i needed to modify the driver to have access to Scissor functions.

thanks I'll try, Could you also show me the modifications for scissor functions. I'm unfamiliar with them

Edit: I did same thing with indices and its a bit better, but some triangles are still not visible.

[Akano]

I have mainly added two functions to the opengl device thats doing the stuff like the samples from libRocket.

RenderInterface:

Code: Select all

 
void RenderInterfaceIrrlicht::EnableScissorRegion( bool enable )
{
        irr::video::COpenGLDriver* l_driver = (irr::video::COpenGLDriver*)m_pDriver;
        l_driver->enableScissorRegion(enable);
}
 
void RenderInterfaceIrrlicht::SetScissorRegion( int x, int y, int width, int height )
{
        irr::video::COpenGLDriver* l_driver = (irr::video::COpenGLDriver*)m_pDriver;
        l_driver->setScissorRegion(x, y, width, height);
}
 

OpenGLDriver:

Code: Select all

 
void COpenGLDriver::enableScissorRegion( bool enable )
{
        if (enable)
                glEnable(GL_SCISSOR_TEST);
        else
                glDisable(GL_SCISSOR_TEST);
}
 
void COpenGLDriver::setScissorRegion( int x, int y, int width, int height )
{
        const core::dimension2d<u32>& renderTargetSize = getCurrentRenderTargetSize();
        glScissor(x, renderTargetSize.Height-y, width, height);
}
 

DirectX has also functions for that. If anyone needs these you should take a look into the libRocket sample for DX, there is a implementation that as i have done could be added to the driver in irrlicht.

[serengeor]

how did you get this to work, COpenGLDriver is not in the includes, or did you include the source folder to you project?

Ok, so I included it from source folder and it works (compiles) but i still have the issue of missing triangles.

Code: Select all

Rocket::Core::CompiledGeometryHandle IrrlichtRenderInterface::CompileGeometry(Rocket::Core::Vertex* vertices, int num_vertices, int* indices, int num_indices, Rocket::Core::TextureHandle texture)
{
    IrrlibRocketGeom * geometry = new IrrlibRocketGeom();
    geometry->texture = (irr::video::ITexture*) texture;
 
    // Read vertices.
    irr::video::S3DVertex vertex;
 
 
    for(int i = 0; i < num_vertices; i++)
    {
        vertex.Pos = irr::core::vector3df(vertices[i].position.x,vertices[i].position.y,0);
        vertex.TCoords = irr::core::vector2df(vertices[i].tex_coord.x,vertices[i].tex_coord.y);
        vertex.Color = irr::video::SColor(vertices[i].colour.alpha,vertices[i].colour.red,vertices[i].colour.green,vertices[i].colour.blue);
        geometry->vertices.push_back(vertex);
    }
 
    for(int i = 0; i < num_indices; i++)
    {
        geometry->indices.push_back(indices[num_indices-i-1]);
    }
 
    return reinterpret_cast<Rocket::Core::CompiledGeometryHandle>(geometry);
}

Code: Select all

m_device->getVideoDriver()->drawVertexPrimitiveList(geom->vertices.pointer(), geom->vertices.size(), geom->indices.pointer(), geom->indices.size()/3);
 

[Akano]

As we have turned off all not needed stuff (like directx) with the compiler config in irrlicht I have it as seperate project in the solution. But it should normally also work if you doing it this way:

Code: Select all

 
void RenderInterfaceIrrlicht::EnableScissorRegion( bool enable )
{
       if (enable)
               glEnable(GL_SCISSOR_TEST);
       else
               glDisable(GL_SCISSOR_TEST);
}
 
void RenderInterfaceIrrlicht::SetScissorRegion( int x, int y, int width, int height )
{
       const core::dimension2d<u32> screensize = m_pDriver->getScreenSize();
       glScissor(x, screensize.Height-y, width, height);
}     
 

This way you wouldn't need to mod the engine itself.

[Akano]

Code: Select all

m_device->getVideoDriver()->drawVertexPrimitiveList(geom->vertices.pointer(), geom->vertices.size(), geom->indices.pointer(), geom->indices.size()/3);

Ok you are using the 3D rendering to get it out. So you need to set on any material/texture that irrlicht shouldn't cull it (front and backface culling turned off)
If you wan't to have it 2D you should instead use the draw2DVertexPrimitiveList function

[serengeor]

Code: Select all

m_device->getVideoDriver()->drawVertexPrimitiveList(geom->vertices.pointer(), geom->vertices.size(), geom->indices.pointer(), geom->indices.size()/3);

Ok you are using the 3D rendering to get it out. So you need to set on any material/texture that irrlicht shouldn't cull it (front and backface culling turned off)
If you wan't to have it 2D you should instead use the draw2DVertexPrimitiveList function

Did that, the triangles are visible from both sides, but the ones that weren't drawn before aren't drawn now either.

[Akano]

Ok, i see so half of the triangles aren't renderd. Then i would first try to render them as points to check if all are there.

Based upon your first posted image, are the triangles now switched so that the other half is visible or still the same as before. If its again just a indicies sorting problem you could write a new sorting that will manually get them into right build.

Pseudo code:

Code: Select all

 
 
        short* new_indicies = new short[num_indices];
        for(int i=0; i<num_indices; i += 6)
        {
                new_indicies[i] = indices[i];
                new_indicies[i+1] = indices[i+1];
                new_indicies[i+2] = indices[i+2];
                new_indicies[i+3] = indices[i+5];
                new_indicies[i+4] = indices[i+4];
                new_indicies[i+5] = indices[i+3];
        }