Godot Viewports: 3 examples from real games

This short video shows how you can use Viewports in your Godot projects with 3 examples from real games that we published/are currently developping.
1. Apply a shader to several items as one
2. Organize your Node2D/3D play area with Control Nodes
3. Optimize your decorative elements!
Save Eurydice: bimdav.itch.io/save-eurydice
Magblocks: bimdav.itch.io/magblocks
Subscribe for more learning content coming from real games!
Wishlist A Good Day! store.steampowered.com/app/2097850/A_Good_Day/

[@MrEliptik]

Super cool video and great use of viewports! The last example is my favorite, it's a simple trick but a huge improvements. I also like to use viewports to display anything inside a particles2D. It's especially useful if you want to display text inside particles!

[@cerberegames]

Cool trick! Thanks for sharing!

[@dueddel]

As a web developer for a living I especially like the second example of easily rearranging complex UI elements by simply repositioning the viewport in the node tree, because that's something that's somwhow cumbersome in HMTL (at least it is for me as a backend/server-side programmer of web applications 😉). I personally only used viewports once to try out rendering 3D meshes in a 2D scene (which was surprisingly easy and workd out very well). As of watching this video (especially the first example) I could even imagine creating some art-ish stuff by recursively rendering viewport textures into other viewports that are themselves only used as textures for yet another viewport container, maybe it's even possible to create a cyclic dependencies somehow. Could be interesting to find out. (I'd do myself, but I have too many other things on my own desk unfortunately.) However, great video. Instantly subscribed. 👍

[@cerberegames]

@@dueddel Thanks! I think there are checks in the engine code preventing such cyclic dependencies. I vaguely remember removing those checks for a pull request, only to obtain crazy visual results (tearing everywhere) ^^

[@klaesregis7487]

One other great thing about viewports is that you can toggle input events on or off. E.g. when you have a fullscreen gui overlapping other things that receive inputs. Great video and examples!

[@hungryOrb]

Your explanations are concise, logical, sequential and have, overall, a harmonious quality which renders a heavy impression upon mind and memory. Thankyou

[@gofastutos]

I didn't know that Viewports are so powerfull

[@user-tc5qc4ql8m]

this video literally changed my life

[@ashleyteece4237]

Interesting. Thanks for sharing.

[@jugibur2117]

Great infos, thanks!

[@dondingled]

Really great info here, thanks.

[@RebelliousX]

Really thank you, very helpful.

[@RADkate]

so whats the actual Performance cost of viewports ? if been thinking about alot of uses for them but havent implemented any. how many can you get away with since they basically all render at the same time ?

[@sapbucry]

Thanks, I could use it to render line2D and use light2D to slowly reveal it, awesome

[@pity4657]

For the 3rd use case, you use a Sprite2D to represent the foliage, by using the texture generated by a Viewport and an AnimatedSprite2D. But what about if instead of a simple/static animated entity, it were a more dynamic/complex one? Like Actors that can have multiple animations and so. There exists any cool tricks to reduce the overhead when having many actors on screen, with different animations per action? (walk, attack, idle, etc)

[@cerberegames]

The trick here is that we display several times exactly the same sprite, which is the same for all the flowers at, for example, frame 256. If the animation of the flowers were not synchronised, we could not use this trick. So unless your actors are doing exactly the same thing at the same frame, I don't think that this will work in you case. The only optimisation that I can think of in that case is batch rendering, which Godot can do automatically in some cases. I suggest you look into that! :)

[@boerbol9422]

Thank you for the examples. Your games look very interesting.

[@longuemire748]

Thank you for these examples Excuse me but I would like to use a lot of subviewport at the same time in a 3d scene to take advantage of 2d nodes (anomationplayer, etc) to make a 3d tilemap. Could this cause a slowdown problem if I use a lot of them?

[@lkasikakalus123]

hi, do anyone get this error -render scene: can't use canvas background mode in a render target configured without sampling my main scene have `WorldEnvironment` mode canvas, = for glowing effect. my viewport, i just put usage = 2d without sampling and transparentBG = true, if i take other than 2d without sampling i will get black bg. how can i fix this?

[@cerberegames]

Hi, you have to check "own world" in your viewport, so that the WorldEnvironment is not applied to it :)

[@lkasikakalus123]

@@cerberegames thank you so much

[@Harpokhrat]

Nice!

[@steve16384]

Very interesting and useful.

[@l3vi792]

Good video, thx

[@Filgaja]

I do not understand Viewport in Godot 4.* Aspecialy because of this new SubViewportContainer, and Subviewport... no Tutorial about Viewport of Godot 3 dosnt work anymore. I got it to work to create a viewport with multiple moving sprites as child, but when i tried to use the vieport as texture the FPS of the texture (only of texture not of the rest of the game) was so bad oO to be clear, there where moving fireflys in this viewport and i wanted to use them in one texture as waterreflection but the viewport texture looked so laggy... like 5FPS movement. And there is way to much settings, for example you kann disable 3d and 2d and its possible to do both but nothing happen there.. this node is so not self explaining and the documentation dosnt help me.

[@Lycam]

Not to put you down, but the voice recording sounds very "bassy", its hard to hear even at higher volume. Otherwise the content is very good and keep it up

[@roroto_sic]

super intéressant, merci pour l'info ! :)

[@1gengabe]

this is amazing

[@ByronV]

Very cool!

[@YourWalkerex]

Save Eurydice shader code updated to Godot 4.1 shader_type canvas_item; uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap; uniform sampler2D noise; uniform float threshold : hint_range(0.0, 1.0, 0.7); uniform float border : hint_range(0.0, 1.0, 0.1); uniform vec4 border_color : source_color = vec4(1,0,0,1); uniform float start_time = 0; uniform bool active = false; uniform float duration = 1.; uniform vec4 large_border_color : source_color = vec4(1.); uniform float border_thresh_1 : hint_range(0.0, 1.0, 0.58); uniform float border_thresh_2 : hint_range(0.0, 1.0, 0.5); void fragment() { COLOR = texture(TEXTURE, UV); if (active) { vec4 color = COLOR; float noise_val = texture(noise, UV + start_time).r; vec4 behind = texture(SCREEN_TEXTURE, SCREEN_UV); float time_modulation = sin(TIME - start_time) / duration; float burned = step(1. - time_modulation, noise_val); float burning_border = step(1. - border - time_modulation, noise_val); COLOR = burned * behind + (1. - burned) * (burning_border * border_color + (1. - burning_border) * color); } }

[@shogunassassin]

Very clever :)

[@sismadsmoks2500]

Tu veux pas faire des tutos fr par hasard x)

[@AlexandrGakhov]

I add tilemap to 3d)

[@rungeon83]

This is an awesome video, sub from me!

[@BlueOctopusDev]

A mon avis t'es français