How set DOM-element where game should be rendered?

5 views
Skip to first unread message

alerion

unread,
Mar 5, 2011, 2:50:28 PM3/5/11
to The Render Engine
Hi. I hope I can create topics with questions here.

Can someone help me set DOM-element where game should be rendered? I
want make some UI with ExtJs and render game on the central panel. So
I want just say to engine that game should be rendered in, for
example: $('div#game-container'). I checked classes in API that can
have, in my opinion, some methods. In tutorial you just open page in
iframe. Maybe I just miss something.

Thx and sorry for my English.

alerion

unread,
Mar 5, 2011, 4:21:16 PM3/5/11
to The Render Engine
I did it adding this to Game.setup:

Engine.defaultContext =
HTMLElementContext.create('HTMLElementContext',
container_dom_element);

But I don't want hardcode element in Game object and can't find any
way how pass some arguments to setup method.

bfat...@gmail.com

unread,
Mar 6, 2011, 12:07:49 PM3/6/11
to The Render Engine
You shouldn't change the engine's default context. It is set to the
document for a reason. Instead, you should create a context like it
does in the first tutorial and add it to the default context. Also,
you really shouldn't be modifying the engine unless it is missing
things or you need to extend it somehow. You should be building on
top of the engine, not rewriting the engine's objects to be your game.

alerion

unread,
Mar 6, 2011, 3:02:45 PM3/6/11
to The Render Engine
I just saw that default context is created only if it does not exists,
so decided that it is pretty easy set my own. And I could not find
example.

bfat...@gmail.com

unread,
Mar 7, 2011, 10:21:06 AM3/7/11
to The Render Engine
In the tutorial @ http://www.renderengine.com/tutorials/tutorial1_1.php
it shows you how to set up your render context and then add it to the
engine's default context:

/**
* Called to set up the game, download any resources, and
initialize
* the game to its running state.
*/
setup: function(){
// Set the FPS of the game
Engine.setFPS(this.engineFPS);

// Create the render context
this.fieldBox = Rectangle2D.create(0, 0, this.fieldWidth,
this.fieldHeight);
this.renderContext = CanvasContext.create("Playfield",
this.fieldWidth,
this.fieldHeight);
this.renderContext.setBackgroundColor("black");

// Add the new rendering context to the default engine
context
Engine.getDefaultContext().add(this.renderContext);
},
Reply all
Reply to author
Forward
0 new messages