I have noticed that there is a small space between rows of characters.

X
X

Even on this forum you can see that those two X do not touch.
This same goes for Quest, where do I modify the gap, to make it so that they touch?

You could try adjusting the CSS line-height property; but what you need to set it to will depend on your font.

If you set line-height to "1", then the tail of a 'p' or 'g' would touch the top of an 'X' on the line below.

0.7 is probably about right for making two X's meet; but then the tail of a 'g' will extend over the line below.

I am using pictures instead of text and I am using monospace font.

So tell me how does the CSS line-height property look? Because I have no idea where to find it.

Setting the line-height smaller than 1 seems to have no effect inside of Quest. (Increasing the line-height works fine, but that's no help in this instance.)

x
x
x
x

<span style="line-height:0.5">

x
x
x
x
</span>

<span style="line-height:2.0">

x
x
x
x
</span>

You are my savior.

<img src="https://secure.gravatar.com/avatar/?d=retro" />
<br>
<img src="https://i.imgur.com/7jFZi10b.jpg" />
<br>
<img src="https://i.imgur.com/FOIjtApb.png" />

--

Aargh!

There's still a space in Quest.

Give me a minute...

Yea I was about to say that...

Maybe I should start using something else than Quest for my graphics driven games...

KV: You'd have to adjust the CSS of the containing div. The line-height for a <span> is ignored if it's less than 1.

That only applies for text, though. With images, I suspect you'll need to change something else.

Nah, I can make it behave (I think).

It's become personal now.

Just to give you an idea what I am trying to achieve...

https://i.gyazo.com/dccbe71a8a49fbe21d145e8893626716.png

You see? The black spaces between rows are UGLY.

If you're doing that, why not have a patterned background, an absolutely-positioned image for each object, and use JS to change their coordinates?

Or is this a lasherism?

I dont know what a patterned background is.
I could maybe try to absolutely-position each image.
I dunno how to make things work with JS...

I dont know what lasherism is (google says it is a mental exercise?)

In other words, I am too dubm for that.

Sorry if I am wasting your time, but thanks for the effort guys.

Hey!

I've played that game!!! (Great job, Sebastian!)

Have you played it mrangel?

http://textadventures.co.uk/games/view/fxslqq9snu2iqhul8rufpq/space-invaders

Have you tried setting the background opacity to 0.0? (That should either fix it, or make it worse.)

I am going to sleep because it´s late.

But how would setting the background opacity to 0 help? It does not make a sense to me.

It didn't help, but setting the background of the div to the ground.png image file may work, with a little tweaking...

JS.eval ("$('#gameContent').css('background', 'url(" + GetFileURL("ground.png") + ")')")

(I couldn't figure out how to get it inside of the white box, but it can be done. (It spits out a new div every second, so it's hard to click on it with the HTML editor.))

Doing it in a table might be an option (that is how did the map in Deeper).

But I have to say, if it was me I would not use Quest. There are plenty of frameworks for making JavaScript games out there and you are better using the right tool for the right job, IMHO.

K.V. But that does not fit for what I am trying to achieve.

The solution you´ve shown does not allow me to insert multiple layers of ground or anything dynamic that would show more than one sprite, therefore I think it is not enough.

I will probably follow Pixie´s advice and settle on something different, but until then I will release at least one game in Quest and move on.

Umm, Pixie? Where do I find any documentation about those tables?

Never mind I will just learn from the code of Deeper and hope to learn something.

If you're not specifically attempting to do it with a grid of images, you could do something like...

  msg ("<img src=\"alien.png\" id=\"alien\" style=\"position: absolute; left: 0px; top: 0px\" />")

The absolute causes the image not to scroll as you output more text; it remains in the top left corner of the containing element (probably the output area).

Then after one 'turn', instead of printing a whole new copy of the screen, you could:

  JS.eval ("$('#alien').css('left', '"+(alienship.x_position * pixels_per_square)+"px')")

to move the ship to the place you want it.
The 'left' parameter gives a distance from the left; and 'top' the distance from the top.

Whatever spacing is in place for the normal text, you don't need to worry about it if you're positioning the sprites at specific coordinates.

GameMaker Studio (free and paid versions) would work much better for a Space Invaders-style game. Sacrilege, I know :P

Or, go with a programming language, like Basic, or Visual Basic, and have complete control over everything and create something like this...

(OK, how do I make the picture show up???)