Impact

This forum is read only and just serves as an archive. If you have any questions, please post them on github.com/phoboslab/impact

8 years ago by stahlmanDesign

This is probably not possible because Impact includes its own font command, but I want to know if it's possible to move around images and specifically text boxes that are regular HTML styled with CSS.

I don't know the terminology well, but let's say I have
<div id="myTextBox">
This is HTML text that I want to move
</div>

Using Impact, can I access the (DOM element?) "myTextBox" and affect it in some way, like change the text, move it around on the canvas or turn visibility on/off?

8 years ago by stahlmanDesign

I noticed this post which is interesting, but I can't get it to work. but I think it show you could possibly change the text, but maybe not move it onto the canvas.

http://impactjs.com/forums/code/html-buttons-plugin/page/1#post2933

8 years ago by Graphikos

It's all javascript. You could use jQuery or whatever you want to interact with the DOM, even within Impact. Or am I missing the point of the question?

Impact does has some basic DOM functions... see Utility Functions on http://impactjs.com/documentation/class-reference/ig-core

Really Impact is only built to work with the 2D canvas but nothing is really stopping you from mixing things together.

8 years ago by fugufish

that's true! i mix and match a lot of stuff for my game.

8 years ago by empika

Looks like you need something like

var element = ig.$( selector );

to grab the element you want to manipulate.

Hope that helps a little

8 years ago by stahlmanDesign

When I put this in my impact code
var element = ig.$( "#test" );				
console.log(element);

The console shows:
<div id=​"test">​My test text​</div>​

It's returning the whole HTML line as a string. I want that DOM element to be an object that I can manipulate, such as
element.htmlText = "my new text";
element.position='absolute';
element.top=60 + 'px';
element.left=120 + 'px';

Is that possible? This following code doesn't work, but would I have to make it something like
var element = new Object;
element = ig.$("#test");

8 years ago by dominic

The console shows the markup as a convenience. Your element var is not a string representation, it is the actual HTMLElement.

This works:
var element = ig.$( "#test" );
element.innerHTML = "my new text";
element.style.position = 'absolute';
element.style.top = 60 + 'px';
element.style.left = 120 + 'px';

8 years ago by stahlmanDesign

@dominic That works. Thank you!

I noticed that for accurate placement of elements, you have to make sure the canvas does not centre, as it does by default in Impact in the index.html file. Here I have changed margin:auto to margin:absolute:
#canvas {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: absolute;
			border: 1px solid #555;

The canvas must be at top left. This is probably not a great way to do things, but it works as long as you know you're not going to have anything outside the canvas.

8 years ago by stahlmanDesign

Here is an example of regular HTML following the player around. This permits using accents (but the HTML code still has to be typed in the string).

/><br />
<br />
To make this work I had to make sure the canvas is at 0,0 so that it is the same as the browser window.			</div>
		</div>
	
	
<div class= Page 1 of 1
« first « previous next › last »