# Camera and rendering, how to? (SOLVED)

**URL:** <https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477>\
**Category:** Questions\
**Created:** [April 6, 2016, 8:28pm UTC](https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477 "2016-04-06T20:28:07Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Prawn](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/prawn/32/510_2.png) [@Prawn](https://forum.defold.com/u/Prawn)\
**Post date:** [April 6, 2016, 8:28pm UTC](https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477/1 "2016-04-06T20:28:07Z")

</div>

Hi,

I’m using a camera on my platformer game but I would like to put the camera closer to the player (so zoom in a bit) but I don’t understand how to use Cameras and renders ☹

Someone can explain a bit more than the defold doc please ?  
Which files needed ? And how to set them ?

So desperate…☹ thanks in advance

Prawn

---

<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:** [April 7, 2016, 4:58am UTC](https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477/2 "2016-04-07T04:58:53Z")

</div>

I haven’t actually tried this myself, but after reading the camera documentation it seems as the only thing you have to do is to add the camera component to a game object and let it acquire camera focus. Once the camera is added and has focus it will post it’s current view projection to the render script.

This should be described clearly in the [camera documentation](http://www.defold.com/manuals/cameras/) but if any part of the documentation is unclear then please let us know where you get stuck and maybe share your script file where you acquire camera focus and post a screenshot of your collection with the camera game object.

Zooming in and out should be as easy as modifying the z position of the game object the camera is attached to.

---

<div class="post-metadata">

**Author:** ![sicher](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/sicher/32/8_2.png) [@sicher](https://forum.defold.com/u/sicher)\
**Post date:** [April 7, 2016, 6:46am UTC](https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477/3 "2016-04-07T06:46:00Z")

</div>

Actually, the default render script does orthogonal rendering so the Z position has no effect. The camera and rendering documentation explains how this is set up.

---

<div class="post-metadata">

**Author:** ![Prawn](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/prawn/32/510_2.png) [@Prawn](https://forum.defold.com/u/Prawn)\
**Post date:** [April 8, 2016, 11:15am UTC](https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477/4 "2016-04-08T11:15:24Z")

</div>

I tried but it doesn’t work ☹ I have a script error on set\_projection function  
and lerp function.

I’ve copied the default.render et default.render\_script to another place and renamed them as custom.\*  
Then I’ve changed the render in my game.project to custom.render.

Here is my collection:

 ![](https://forum-defold-uploads.b-cdn.net/original/1X/7e0a6cdf0dd3d9a73fa4721800e535aae4535cae.png)

My project contains 3 screens : 1 Main menu, 1 Levels menu and 1 Game screen (where the player plays 🙂 )  
My camera is only present on my Game screen and follows the player

Here’s my camera.script:

```
screen_width = tonumber(sys.get_config("display.width"))
screen_height = tonumber(sys.get_config("display.height"))
    
function init()
    msg.post("#camera", "acquire_camera_focus")
end

function on_message(self, message_id, message, sender)
    if message_id == hash("follow") then
        local pos_x = message.position.x - (screen_width/ 2)
        if pos_x <= 0 then
            pos_x = 0
        elseif pos_x >= screen_width then 
            pos_x = screen_width
        end
        
        local pos_y = message.position.y - (screen_height / 2)
        if pos_y <= 0 then
            pos_y = 0
        elseif pos_y >= screen_height then 
            pos_y = screen_height
        end
                
        go.set_position(vmath.vector3(pos_x, pos_y, 0))
    end
end
```

My player.script just send a message “follow” to the camera.script to make it follow.

Here’s my custom.render\_script:

```
function init(self)
    self.tile_pred = render.predicate({"tile"})
    self.gui_pred = render.predicate({"gui"})
    self.text_pred = render.predicate({"text"})
    self.particle_pred = render.predicate({"particle"})

    self.clear_color = vmath.vector4(0, 0, 0, 0)
    self.clear_color.x = sys.get_config("render.clear_color_red", 0)
    self.clear_color.y = sys.get_config("render.clear_color_green", 0)
    self.clear_color.z = sys.get_config("render.clear_color_blue", 0)
    self.clear_color.w = sys.get_config("render.clear_color_alpha", 0)

    self.view = vmath.matrix4()
end

function update(self)
    render.set_depth_mask(true)
    render.clear({[render.BUFFER_COLOR_BIT] = self.clear_color, [render.BUFFER_DEPTH_BIT] = 1, [render.BUFFER_STENCIL_BIT] = 0})

    render.set_viewport(0, 0, render.get_window_width(), render.get_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.set_projection(self.projection)

    render.draw(self.tile_pred)
    render.draw(self.particle_pred)
    render.draw_debug3d()

    render.set_view(vmath.matrix4())
    render.set_projection(self.projection)

    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.set_depth_mask(false)
    render.draw_debug2d()
end

function on_message(self, message_id, message)
    if message_id == hash("clear_color") then
        self.clear_color = message.color
    elseif message_id == hash("set_view_projection") then
        self.view = message.view
        self.projection = message.projection
    end
end
```

---

<div class="post-metadata">

**Author:** ![Prawn](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/prawn/32/510_2.png) [@Prawn](https://forum.defold.com/u/Prawn)\
**Post date:** [April 11, 2016, 10:25pm UTC](https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477/5 "2016-04-11T22:25:53Z")

</div>

Up, nobody to help me.. ☹  
I just want to make my camera closer, that’s all, please ☹

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [April 11, 2016, 11:14pm UTC](https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477/6 "2016-04-11T23:14:49Z")

</div>

Studying this version of the render script may help you - it’s from a 3d project example

[main.render\_script.lua](https://defold-forum-bucket.nbg1.your-objectstorage.com/original/1X/0190d8e2dc2d47bc9cc0cbb1943f84416859a454.lua) (1.3 KB)

---

<div class="post-metadata">

**Author:** ![sven](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/sven/32/1086_2.png) [@sven](https://forum.defold.com/u/sven)\
**Post date:** [April 12, 2016, 9:03am UTC](https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477/7 "2016-04-12T09:03:38Z")

</div>

To “zoom” an orthogonal camera you need to change the left, right, top and bottom values instead of the actual Z-position. Try playing around with the projection matrix like this:

```lua
local zoom_value = 0.5
local proj_mtx = vmath.matrix4_orthographic(-render.get_width() / 2.0 * zoom_value, render.get_width() / 2.0 * zoom_value, -render.get_height() / 2.0 * zoom_value, render.get_height() / 2.0 * zoom_value, -1, 1)
render.set_projection(proj_mtx)

```

(I haven’t had time to test this myself, so please excuse any errors in the code. 🙂 )

---

<div class="post-metadata">

**Author:** ![Prawn](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/prawn/32/510_2.png) [@Prawn](https://forum.defold.com/u/Prawn)\
**Post date:** [April 12, 2016, 11:25am UTC](https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477/8 "2016-04-12T11:25:27Z")

</div>

> [@sven](#):
>
> local zoom\_value = 0.5  
> local proj\_mtx = vmath.matrix4\_orthographic(-render.get\_width() / 2.0 \* zoom\_value, render.get\_width() / 2.0 \* zoom\_value, -render.get\_height() / 2.0 \* zoom\_value, render.get\_height() / 2.0 \* zoom\_value, -1, 1)  
> render.set\_projection(proj\_mtx)

Thanks a lot Sven it works. I changed some of your value of course and now it’s fine 🙂 but one more thing, now my graphics are a bit “blurred” 😕 it’s a 2D game I make, with 128x128px tilemap, is there a way to avoid this blur thing ?

---

<div class="post-metadata">

**Author:** ![sven](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/sven/32/1086_2.png) [@sven](https://forum.defold.com/u/sven)\
**Post date:** [April 12, 2016, 11:27am UTC](https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477/9 "2016-04-12T11:27:57Z")

</div>

Awesome! 😃

I think what you encounter with blurred graphics is due to texture filtering, `linear` vs `nearest`, have a look at this post: [Low resolution pixel art game - #7 by britzl](https://forum.defold.com/t/low-resolution-pixel-art-game/1434/7)

---

<div class="post-metadata">

**Author:** ![Prawn](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/prawn/32/510_2.png) [@Prawn](https://forum.defold.com/u/Prawn)\
**Post date:** [April 12, 2016, 11:33am UTC](https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477/10 "2016-04-12T11:33:33Z")

</div>

Thanks I will take a look on it, and now I have to manage my render only to render when the player is playing ^^ and not on the main menu

---

<div class="post-metadata">

**Author:** ![Prawn](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/prawn/32/510_2.png) [@Prawn](https://forum.defold.com/u/Prawn)\
**Post date:** [April 12, 2016, 11:34am UTC](https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477/11 "2016-04-12T11:34:06Z")

</div>

Can I have multiple render ? 🙂

---

<div class="post-metadata">

**Author:** ![sicher](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/sicher/32/8_2.png) [@sicher](https://forum.defold.com/u/sicher)\
**Post date:** [April 12, 2016, 11:37am UTC](https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477/12 "2016-04-12T11:37:13Z")

</div>

Depends on what you mean. You can have one render script, but that can include other files.

The render script can do arbitrary passes. You can do post processing, light/shadow passes, split screen or whatever you like.

---

<div class="post-metadata">

**Author:** ![Prawn](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/prawn/32/510_2.png) [@Prawn](https://forum.defold.com/u/Prawn)\
**Post date:** [April 12, 2016, 12:24pm UTC](https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477/13 "2016-04-12T12:24:44Z")

</div>

Oh ok I will you msg.post(“@render”,…) to change my rendering right ?

Now it’s not blurred anymore but it’s “too sharp” I mean it’s like there’s no antialiasing, even if I change the “samples” settings in my game.project it doesn’t change anything

---

<div class="post-metadata">

**Author:** ![sicher](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/sicher/32/8_2.png) [@sicher](https://forum.defold.com/u/sicher)\
**Post date:** [April 12, 2016, 2:12pm UTC](https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477/14 "2016-04-12T14:12:11Z")

</div>

All messages you send to @render: will arrive in the on\_message() function in your render script and you can react to it as you see fit.

---

<div class="post-metadata">

**Author:** ![Prawn](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/prawn/32/510_2.png) [@Prawn](https://forum.defold.com/u/Prawn)\
**Post date:** [April 12, 2016, 2:23pm UTC](https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477/15 "2016-04-12T14:23:54Z")

</div>

Yes I’ve done that and it works fine 🙂 thanks

I’m working on the “too sharp” thing now 😕

---

<div class="post-metadata">

**Author:** ![sven](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/sven/32/1086_2.png) [@sven](https://forum.defold.com/u/sven)\
**Post date:** [April 12, 2016, 2:25pm UTC](https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477/16 "2016-04-12T14:25:16Z")

</div>

Can you give us an screenshot that highlights this sharpness? 🙂

---

<div class="post-metadata">

**Author:** ![Prawn](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/prawn/32/510_2.png) [@Prawn](https://forum.defold.com/u/Prawn)\
**Post date:** [April 13, 2016, 8:08am UTC](https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477/17 "2016-04-13T08:08:05Z")

</div>

Here is it:

 ![](https://forum-defold-uploads.b-cdn.net/original/1X/531f4596caf38e171ddbb9d8446d1a9648fbed49.png)

it looks like every strokes who are not straight aren’t clean.

---

<div class="post-metadata">

**Author:** ![Prawn](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/prawn/32/510_2.png) [@Prawn](https://forum.defold.com/u/Prawn)\
**Post date:** [April 14, 2016, 8:37am UTC](https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477/18 "2016-04-14T08:37:48Z")

</div>

FYI: if I don’t zoom with my camera all strokes looks normal, neither too blurred neither too sharp

---

<div class="post-metadata">

**Author:** ![sven](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/sven/32/1086_2.png) [@sven](https://forum.defold.com/u/sven)\
**Post date:** [April 14, 2016, 9:56am UTC](https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477/19 "2016-04-14T09:56:21Z")

</div>

I think it’s something that happens if you zoom on something that uses `nearest` as filtering… ☹ How did it look with `linear`? Does it look better if you have `nearest` and zoom at exactly x2 (0.5 in my example)?

Are the sprites scaled btw?

---

<div class="post-metadata">

**Author:** ![Prawn](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/prawn/32/510_2.png) [@Prawn](https://forum.defold.com/u/Prawn)\
**Post date:** [April 14, 2016, 11:14am UTC](https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477/20 "2016-04-14T11:14:23Z")

</div>

With `linear`, it’s a bit blurred (I’m at 1.5 in my case):

 ![](https://forum-defold-uploads.b-cdn.net/original/1X/6dd8b237becfc3a2f3d0f2d0972ff9d7b89b37c3.png)

With zoom x2 (0.5):

 ![](https://forum-defold-uploads.b-cdn.net/original/1X/79d033f983a844ae92c823651aeecd8afb211e81.png)

And my sprite is not scaled, the character is at 1,1,1 and for the ground I use tilemaps.

[Next page](https://forum.defold.com/t/camera-and-rendering-how-to-solved/1477.md?page=2)