# Screen has black borders if it's bigger than project's default resolution

**URL:** <https://forum.defold.com/t/screen-has-black-borders-if-its-bigger-than-projects-default-resolution/70284>\
**Category:** Questions\
**Created:** [February 4, 2022, 8:44am UTC](https://forum.defold.com/t/screen-has-black-borders-if-its-bigger-than-projects-default-resolution/70284 "2022-02-04T08:44:13Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![kidkiedis](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/k/c57346/32.png) [@kidkiedis](https://forum.defold.com/u/kidkiedis)\
**Post date:** [February 4, 2022, 8:44am UTC](https://forum.defold.com/t/screen-has-black-borders-if-its-bigger-than-projects-default-resolution/70284/1 "2022-02-04T08:44:13Z")

</div>

Hey there!

We have 1920/1080 resolution set in our game.project file. But it only resizes (stretches) to resolutions smaller than 1920/1080. If we try to stretch it to 4k, it seems like it stretches correctly, but everything beyond that 1920/1080 is black, i.e. our game is running in 1/4 corner of a black screen.

---

<div class="post-metadata">

**Author:** ![kidkiedis](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/k/c57346/32.png) [@kidkiedis](https://forum.defold.com/u/kidkiedis)\
**Post date:** [February 4, 2022, 9:03am UTC](https://forum.defold.com/t/screen-has-black-borders-if-its-bigger-than-projects-default-resolution/70284/2 "2022-02-04T09:03:26Z")

</div>

Actually, the render script was the first thing we made in our game. And seems like it’s a total mess)

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [February 4, 2022, 9:18am UTC](https://forum.defold.com/t/screen-has-black-borders-if-its-bigger-than-projects-default-resolution/70284/3 "2022-02-04T09:18:32Z")

</div>

> [@kidkiedis](#):
>
> And seems like it’s a total mess)

🙂

So you’re able to sort the issue on your own then?

---

<div class="post-metadata">

**Author:** ![kidkiedis](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/k/c57346/32.png) [@kidkiedis](https://forum.defold.com/u/kidkiedis)\
**Post date:** [February 4, 2022, 9:24am UTC](https://forum.defold.com/t/screen-has-black-borders-if-its-bigger-than-projects-default-resolution/70284/4 "2022-02-04T09:24:53Z")

</div>

Not so sure about that( We still can’t remove the black border. In one case it appears in the right part of the screen, in other case it’s on top..

Maybe some example might help. We checking few examples right now, but not sure if they will help in our case. Will be extremely grateful for some desktop resolutions example.

---

<div class="post-metadata">

**Author:** ![kidkiedis](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/k/c57346/32.png) [@kidkiedis](https://forum.defold.com/u/kidkiedis)\
**Post date:** [February 4, 2022, 10:33am UTC](https://forum.defold.com/t/screen-has-black-borders-if-its-bigger-than-projects-default-resolution/70284/5 "2022-02-04T10:33:00Z")

</div>

Seems like I’ve just fixed that. But absolutely have no idea what’s happened..

---

<div class="post-metadata">

**Author:** ![kidkiedis](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/k/c57346/32.png) [@kidkiedis](https://forum.defold.com/u/kidkiedis)\
**Post date:** [February 5, 2022, 9:14am UTC](https://forum.defold.com/t/screen-has-black-borders-if-its-bigger-than-projects-default-resolution/70284/6 "2022-02-05T09:14:18Z")

</div>

Nope. Fixed almost everything and now the game layer stretches correctly as it should. But still everything beyond workspace (1920x1080) is pitch black, i.e. 4k looks like this.

 ![image](https://forum-defold-uploads.b-cdn.net/original/3X/2/3/23c5d0f78b18ed60cf0ebb6093d4978cbd1c732e.jpeg)

here’s our render script

```
local function fixed_projection(self)
    local projected_width = render.get_width()-- / zoom / resZoomX
    local projected_height = render.get_height()-- / zoom / resZoom
    local xoffset = - (projected_width)/2 --(projected_width - render.get_width()) - 240 --480
    local yoffset = - (projected_height)/2 --(projected_height - render.get_height()) - 180 --320
    return vmath.matrix4_orthographic(xoffset, xoffset + projected_width, yoffset, yoffset + projected_height, -1000, 5000)
end

function update(self, dt)
    render.clear({[render.BUFFER_COLOR_BIT] = vmath.vector4(0,0,0,0), [render.BUFFER_DEPTH_BIT] = 1, [render.BUFFER_STENCIL_BIT] = 0})
    
    render.set_depth_mask(true)
    render.set_stencil_mask(0xff)

    render.set_viewport(0, 0, window_width, window_height)
    render.set_view(self.view)

    render.set_depth_mask(false)
    render.disable_state(render.STATE_DEPTH_TEST)
    render.disable_state(render.STATE_STENCIL_TEST)
    render.enable_state(render.STATE_BLEND)
    render.set_blend_func(render.BLEND_SRC_ALPHA, render.BLEND_ONE_MINUS_SRC_ALPHA)
    render.disable_state(render.STATE_CULL_FACE)

    --render to buffer
    render.set_projection(fixed_projection())
    render.enable_render_target(self.sbuffer)

    
    --draw gfx
    render.draw(self.background_pred)
    render.draw(self.tiles_pred)
    render.draw(self.twode_pred)
    render.draw(self.mist_pred)

    render.disable_render_target(self.sbuffer)

    --send buffer to screen
    print(render.get_window_width(), render.get_window_height(), window_width, window_height, resZoom, zoom)

    render.set_view(vmath.matrix4())
    render.set_viewport(0, 0, window_width / resZoomX, window_height / resZoom)
    render.set_projection(vmath.matrix4())

    render.enable_texture(0, self.sbuffer, render.BUFFER_COLOR_BIT)
    render.draw(self.quad_pred)
    render.disable_texture(0, self.sbuffer, render.BUFFER_COLOR_BIT)

    --render Lights
    render.set_viewport(0, 0, window_width, window_height)
    render.set_view(self.view)
    render.draw(self.lights_pred)

    -- render GUI
    render.set_view(vmath.matrix4())
    render.set_viewport(0, 0, window_width, window_height)
    render.set_projection(vmath.matrix4_orthographic(0, window_width, 0, window_height, -1, 1))

    render.enable_state(render.STATE_STENCIL_TEST)
    render.draw(self.gui_pred)
    render.draw(self.text_pred)
    render.disable_state(render.STATE_STENCIL_TEST)
    render.draw(self.cursors_pred)
end

```

---

<div class="post-metadata">

**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\
**Post date:** [February 5, 2022, 10:04am UTC](https://forum.defold.com/t/screen-has-black-borders-if-its-bigger-than-projects-default-resolution/70284/7 "2022-02-05T10:04:08Z")

</div>

> [@kidkiedis](#):
>
> `render.set_viewport(0, 0, window_width, window_height)`

What is the window width/height at this point?

---

<div class="post-metadata">

**Author:** ![kidkiedis](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/k/c57346/32.png) [@kidkiedis](https://forum.defold.com/u/kidkiedis)\
**Post date:** [February 5, 2022, 10:05am UTC](https://forum.defold.com/t/screen-has-black-borders-if-its-bigger-than-projects-default-resolution/70284/8 "2022-02-05T10:05:42Z")

</div>

window\_width, window\_height - is active screen resolution from game settings, i.e. it’s 3840 and 2160 for 4k.

```
resZoom = settings.resolution.y / 1080
resZoomX = settings.resolution.x / 1920
window_width = settings.resolution.x
window_height = settings.resolution.y

```

---

<div class="post-metadata">

**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\
**Post date:** [February 5, 2022, 10:15am UTC](https://forum.defold.com/t/screen-has-black-borders-if-its-bigger-than-projects-default-resolution/70284/9 "2022-02-05T10:15:41Z")

</div>

> [@kidkiedis](#):
>
> `render.set_viewport(0, 0, window_width / resZoomX, window_height / resZoom)`

Isn’t this the problem?  
What do you actually set the viewport to here? What are the values?  
Shouldn’t it me window width/height?  
Doc for [glViewport](https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/glViewport.xhtml)

---

<div class="post-metadata">

**Author:** ![kidkiedis](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/k/c57346/32.png) [@kidkiedis](https://forum.defold.com/u/kidkiedis)\
**Post date:** [February 5, 2022, 10:21am UTC](https://forum.defold.com/t/screen-has-black-borders-if-its-bigger-than-projects-default-resolution/70284/10 "2022-02-05T10:21:31Z")

</div>

Changed to render.set\_viewport(0, 0, window\_width, window\_height)  
Now it looks like this. It’s a test resolution of 2560x1000

 ![image](https://forum-defold-uploads.b-cdn.net/original/3X/1/3/13258a8c4bee5c8200b156201702450d4e0279fa.jpeg)

Adding render.set\_viewport(0, 0, window\_width, window\_height **/ resZoom** ) gives correct height.  
resZoom = window\_height(1000) / workspace\_height(1080)

 ![image](https://forum-defold-uploads.b-cdn.net/original/3X/0/3/03677d3202cfa76dbad2a6bcb2c2ae4ac951957f.jpeg)

---

<div class="post-metadata">

**Author:** ![kidkiedis](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/k/c57346/32.png) [@kidkiedis](https://forum.defold.com/u/kidkiedis)\
**Post date:** [February 5, 2022, 12:26pm UTC](https://forum.defold.com/t/screen-has-black-borders-if-its-bigger-than-projects-default-resolution/70284/12 "2022-02-05T12:26:04Z")

</div>

OK, that’s where I came to)

I’m setting the projection to workspace/gamecamera resolution (1920x1080) with

```
local function fixed_projection(self)
    local projected_width = render.get_width()
    local projected_height = render.get_height()
    local xoffset = - projected_width / 2
    local yoffset = - projected_height / 2
    return vmath.matrix4_orthographic(xoffset, xoffset + projected_width, yoffset, yoffset + projected_height, -1000, 5000)
end

```

Then I render all game/camera layers to some sbuffer, and then scale it to game window with

```
render.set_view(vmath.matrix4())
    render.set_projection(vmath.matrix4())
    render.set_viewport(0, 0, render.get_window_width(), render.get_window_height())

    render.enable_texture(0, self.sbuffer, render.BUFFER_COLOR_BIT)
    render.draw(self.quad_pred)
    render.disable_texture(0, self.sbuffer, render.BUFFER_COLOR_BIT)

```

And here how game/camera layer looks on 720p, 1080p and testing resolution 2560 x 1000

 ![image](https://forum-defold-uploads.b-cdn.net/original/3X/9/4/941cf42ecf4c5aac608244e025c9c4cc81e9e0f5.jpeg)

 ![image](https://forum-defold-uploads.b-cdn.net/original/3X/2/4/24048b03c6bdbea0d1fb50ae2fb7e0d12c809a7e.jpeg)

 ![image](https://forum-defold-uploads.b-cdn.net/original/3X/4/f/4ffb5bc1be3cec12f1916ffde1ace447f6120540.jpeg)

Looks like it definitely lacks some index on a final stage. So when I add that index

```
resZoomX = render.get_width() / render.get_window_width()
resZoom = render.get_height() / render.get_window_height()
render.set_viewport(0, 0, render.get_window_width() * resZoomX, render.get_window_height() * resZoom)

```

Done. That’s the correct stretch to final window in all resolutions. But it paints black everything that is beyond workspace /gamecamera resolution (1920x1080). And I don’t know where that black border came from.

 ![image](https://forum-defold-uploads.b-cdn.net/original/3X/d/e/defb79c0130724a27e54596786563198072cc024.jpeg)

---

<div class="post-metadata">

**Author:** ![kidkiedis](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/k/c57346/32.png) [@kidkiedis](https://forum.defold.com/u/kidkiedis)\
**Post date:** [February 8, 2022, 8:01am UTC](https://forum.defold.com/t/screen-has-black-borders-if-its-bigger-than-projects-default-resolution/70284/13 "2022-02-08T08:01:18Z")

</div>

Solved! Made a repo for Alexey, now everything fits exactly as it should.

 ![image](https://forum-defold-uploads.b-cdn.net/original/3X/d/e/de9b6c159562587e4b04e5c5dac0e6d08125e631.jpeg)

Huge thanks!

---

<div class="post-metadata">

**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\
**Post date:** [February 8, 2022, 8:25am UTC](https://forum.defold.com/t/screen-has-black-borders-if-its-bigger-than-projects-default-resolution/70284/14 "2022-02-08T08:25:21Z")

</div>

Great to hear!

For the benefit of the users of the forum, could you explain a bit about the solution? (while it’s fresh in memory 🙂 )

---

<div class="post-metadata">

**Author:** ![kidkiedis](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/k/c57346/32.png) [@kidkiedis](https://forum.defold.com/u/kidkiedis)\
**Post date:** [February 8, 2022, 8:33am UTC](https://forum.defold.com/t/screen-has-black-borders-if-its-bigger-than-projects-default-resolution/70284/15 "2022-02-08T08:33:05Z")

</div>

Well, for me it might still take some effort to sort it all out 😁  
Alex remade all screen render target calculations and moved them to separate function, and now it works fine.

Maybe Alexey @AGulev will find a minute to briefly describe where the problem was.

---

<div class="post-metadata">

**Author:** ![AGulev](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/agulev/32/4541_2.png) [@AGulev](https://forum.defold.com/u/AGulev)\
**Post date:** [February 8, 2022, 10:16am UTC](https://forum.defold.com/t/screen-has-black-borders-if-its-bigger-than-projects-default-resolution/70284/16 "2022-02-08T10:16:37Z")

</div>

Long story short:

- it’s important to change RT size when window size changed, to be able to draw pixels 1 to 1
- We should know the size of the quad we use for texture drawing and take it into account for the quad projection
- In my case, I have 0, 0 in the bottom left, but in @kidkiedis case, they have 0, 0 in the screen center (it should be taken into account in projections)
- and some other small fixes like RT clear, set\_depth\_mask(false), etc

I can’t share the render script I sent to @kidkiedis (it’s not my project), but here is my old render\_script from Solitaire I made all the fixes based on it:  
[render.zip](https://forum.defold.com/uploads/short-url/beI2GOSF8xTqyTa1kKxRLqNWO34.zip) (4.9 KB)
