Jump to content
  • Advertisement

Photo finish - automating previews of levels



Hi all,

The main project for this weekend was to get powerups tied to an actual level in the game, which i have now got working as in the video below:

With this out of the way I have decided to progress onto the next feature of the game which requires development. This is the level select page, which you are presented with if you have previously unlocked any levels in the game, letting you revisit and replay them to get better scores and collect extra powerups.

Within the menu, each level should have a preview image, or thumbnail, showing its appearance to allow for visual memory of which level is which. This was previously implemented on the .NET version of Firework Factory, as can be seen below:

XNA version level selector

In the newer unreal engine version this must be re-implemented. In the previous version, screenshots were taken by spawning the entire level, taking a screen capture of the level and storing that in a texture.

I decided to do something similar in UE4, only to find that doing so would be overkill, as instantiating a level is quite expensive, and would have to be done dozens of times on startup just to capture screenshots to render targets, which could then be turned into materials, and displayed in the menu. Instead, i chose to make a 'photo studio', and get the levels 'photographed'.

Yes, you heard right, a photo studio.

The solution for the problem is to first create a separate map. Within this separate map create a couple of strong directional lights to ensure that there isn't too much shadow in the images. Secondly, create a floor made of a non-emissive completely black material with no reflectiveness. Essentially, this floor is impossibly black, much like it has been painted with vantablack.

Next, I set up a blueprint to incrementally load each level in a loop, wait 1 second for the postprocessing effects to settle, and issue the console command:

HighResSnapshot 3.0

The code for this can be seen in the blueprint below:


This causes the game to save a screenshot of the current level to the folder Saved\Screenshots\Windows, where it can be loaded into GIMP and autocropped, giving me an image like the one below, which is the one for level 4:

Level 4 Thumbnail

These can then be associated with the levels as a Texture2D by importing them into the content folder, so that a thumbnail can be displayed. As i add new levels, i just re-run the process to generate the snapshots, pick the new levels images, autocrop them and drop them into content, which takes all of 30 seconds. This means i can ensure that all the images are taken from the same angle, with the same lighting, the same postprocessing effects, and have an image of exactly the same dimensions.

Next on the list: Use these thumbnails for an actual level select menu!

Feedback as always is more than welcome, stay tuned for further updates!


Recommended Comments

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Advertisement
  • Advertisement
  • What is your GameDev Story?

    In 2019 we are celebrating 20 years of GameDev.net! Share your GameDev Story with us.

    (You must login to your GameDev.net account.)

  • Blog Entries

  • Similar Content

    • By DividedByZero
      Hi Guys,
      I am playing with projective texturing which I now have working well.
      However, I am having troubles figuring out how to blend the original texture with the projective texture. I am trying to make it so the projective texture is painted on top of the original texture.
      I have come close with this
      textureColor = TextureStandard.Sample(SamplerWrap, input.textureCoord); float4 texMixed = (projectionColor * projectionColor.a + textureColor * (1 - projectionColor.a)); color *= texMixed;  
      But this is giving me the following output;

      The skull should be a solid black, and the greens are a bit washed out outside of the projected area.
      Any advice on how to cleanly project the skull on to the body would be truly appreciated.
      Thanks in advance
    • By Transcendent
      So this is the problem that I have :- https://youtu.be/kU8Dm5bDJXg
      This is the code i am using:-
      using System.Collections; using System.Collections.Generic; using UnityEngine; namespace SA { public class AnimatorHook : MonoBehaviour { Animator anim; StateManager states; public void Init(StateManager st) { states = st; anim = st.anim; } void OnAnimatorMove() { if (!states.canMove) anim.ApplyBuiltinRootMotion(); states.rigid.drag = 0; float multiplier = 1; Vector3 delta = anim.deltaPosition; delta.y = 0; Vector3 v = (delta * multiplier) / states.delta; states.rigid.velocity = v; } } } For additional reference see the following code
      using System.Collections; using System.Collections.Generic; using UnityEngine; namespace SA { public class StateManager : MonoBehaviour { [Header("Init")] public GameObject activeModel; [Header("Inputs")] public float vertical; public float horizontal; public float moveAmount; public Vector3 moveDir; public bool rt, rb, lt, lb; [Header("Stats")] public float moveSpeed = 5f; public float runSpeed = 8f; public float rotateSpeed = 20; public float toGround = 0.5f; [Header("States")] public bool onGround; public bool run; public bool lockOn; public bool inAction; public bool canMove; [Header("Other")] public EnemyTarget lockOnTarget; [HideInInspector] public Animator anim; [HideInInspector] public Rigidbody rigid; [HideInInspector] public AnimatorHook a_hook; [HideInInspector] public float delta; [HideInInspector] public LayerMask ignoreLayers; float _actionDelay; public void Init() { SetupAnimator(); rigid = GetComponent<Rigidbody>(); rigid.angularDrag = 999; rigid.drag = 4; rigid.constraints = RigidbodyConstraints.FreezeRotationX | RigidbodyConstraints.FreezeRotationZ; a_hook = activeModel.AddComponent<AnimatorHook>(); a_hook.Init(this); gameObject.layer = 8; ignoreLayers = ~(1 << 9); anim.SetBool("onGround",true); } void SetupAnimator() { if(activeModel == null) { anim = GetComponentInChildren<Animator>(); if(anim == null) { Debug.Log("no model found"); } else { activeModel = anim.gameObject; } } if(anim == null) { anim = activeModel.GetComponent<Animator>(); } //anim.applyRootMotion = false; } public void FixedTick(float d) { delta = d; rigid.drag = (moveAmount > 0 || !onGround) ? 0 : 4; DetectAction(); if (inAction) { // anim.applyRootMotion = true; _actionDelay += delta; if(_actionDelay > 0.3f) { inAction = false; _actionDelay = 0; } else { return; } } canMove = anim.GetBool("canMove"); if (!canMove) { return; } //anim.applyRootMotion = false; float targetSpeed = moveSpeed; if (run) targetSpeed = runSpeed; if(onGround) rigid.velocity = moveDir * (targetSpeed * moveAmount); /* if (run) lockOn = false; */ Vector3 targetDir = (lockOn == false) ? moveDir : lockOnTarget.transform.position - transform.position; targetDir.y = 0; if (targetDir == Vector3.zero) targetDir = transform.forward; Quaternion tr = Quaternion.LookRotation(targetDir); Quaternion targetRotation = Quaternion.Slerp(transform.rotation, tr, delta * moveAmount * rotateSpeed); transform.rotation = targetRotation; anim.SetBool("lockon", lockOn); if (lockOn == false) HandleMovementAnimations(); else HandleLockOnAnimations(moveDir); } public void DetectAction() { if (canMove == false) return; if (rb == false && rt == false && lt == false && lb == false) return; string targetAnim = null; if (rb) targetAnim = "Sword And Shield Attack"; if (rt) targetAnim = "Stable Sword Outward Slash"; if (lb) targetAnim = "Standing Melee Attack Horizontal"; if (lt) targetAnim = "Sword And Shield Slash (1)"; if (string.IsNullOrEmpty(targetAnim)) return; canMove = false; inAction = true; anim.CrossFade(targetAnim,0.2f); //rigid.velocity = Vector3.zero; } public void Tick(float d) { delta = d; onGround = OnGround(); anim.SetBool("onGround", onGround); } void HandleMovementAnimations() { anim.SetBool("run", run); anim.SetFloat("Vertical", moveAmount ,0.4f,delta); } void HandleLockOnAnimations(Vector3 moveDir) { Vector3 relativeDir = transform.InverseTransformDirection(moveDir); float h = relativeDir.x; float v = relativeDir.z; anim.SetFloat("Vertical", v, 0.2f, delta); anim.SetFloat("Horizontal", h, 0.2f, delta); } public bool OnGround() { bool r = false; Vector3 origin = transform.position + (Vector3.up * toGround); Vector3 dir = -Vector3.up; float dis = toGround + 0.3f; RaycastHit hit; if(Physics.Raycast(origin,dir,out hit,dis)) { r = true; Vector3 targetPosition = hit.point; transform.position = targetPosition; } return r; } } } I've been stuck on this for too long, any help will be highly appreciated
    • By Tomtheseadog
      Hey guys,
      I'm having a little trouble with my point light. My light is working but the light source moves when I move my camera. I've been trying all week to fix it but at my wits end. Maybe I haven't converted it to the proper space.
      in vec3 positions;
      in vec2 texCoords;
      in vec3 normals;
      out vec2 pass_texCoords;
      out vec3 mvVertexNormal;
      out vec3 mvVertexPosition;
      uniform mat4 projectionMatrix;
      uniform mat4 modelViewMatrix;
      uniform mat4 normalMatrix;
      void main()
      pass_texCoords = texCoords;
      vec4 mvPos = modelViewMatrix * vec4(positions, 1.0);
      mvVertexNormal = mat3(normalMatrix) * normals;
      mvVertexPosition = vec3(modelViewMatrix * vec4(positions, 1.0));
      gl_Position = projectionMatrix * mvPos;
      in vec2 pass_texCoords;
      in vec3 mvVertexPosition;
      in vec3 mvVertexNormal;
      out vec4 out_colour;
      struct Material
          int hasNormalMap;
          int hasTexture;
          vec3 diffuse;
          vec3 ambient;
          vec3 specular;
          float reflectivity;
      struct PointLight
          vec3 position;
          vec3 colour;
          float intensity;
      uniform sampler2D our_texture;
      uniform Material material;
      uniform vec3 ambientLight;
      uniform float specularPower;
      uniform PointLight pointLight;
      uniform vec3 viewer_position;
      vec4 calculateLight(PointLight light, Material material, vec3 position, vec3 normal)
      // AMBIENT
      vec3 ambient = ambientLight * light.colour;
      // DIFFUSE
      vec3 norm = normalize(normal);
      vec3 lightDir = normalize(light.position - position);
      float diff = max(dot(norm, lightDir), 0.0);
      vec3 diffuse = diff * light.colour;  
      // SPECULAR
      vec3 viewDir = normalize(viewer_position - position);
      vec3 reflectDir = reflect(-lightDir, norm);
      float spec = pow(max(dot(viewDir, reflectDir), 0.0), 32);
      vec3 specular = specularPower * spec * light.colour;
      vec3 result = (ambient + diffuse + specular);
      return vec4(result, 1.0);
      void main()
      vec4 lightResult = calculateLight(pointLight, material, mvVertexPosition, mvVertexNormal);
      out_colour = texture(our_texture, pass_texCoords) * lightResult;
      The light source is coming from the cube in the red circle. Even the first picture the light isnt directly under the cube. If I don't move my camera and have the cube light source move around automatically the the light will stay with it. It's only if I move the camera that I get problems. The second picture i've moved my camera to the left and the light is moving with me and moving away from the cube light source.

    • By jb-dev
      This is a short .gif showing off visuals effects for the parrying mechanic
    • By Dyonisian
      Note: This article was originally published on LinkedIn.  If you enjoy my article, please click through and consider connecting with me.
      Can programmers art? How far can creativity and programming take you?
      I have summarized what I learned in several months into 7 key techniques to improve the visual quality of your game.
      "Programmer art" is something of a running joke. For those unfamiliar with the term, it refers to the "placeholder" or "throw-together" art that programmers tend to use while developing games.
      Some of us don't have the necessary artistic skills, however, sometimes we just can't be bothered to put in the effort. We're concerned about the technical side of things working - art can come later.
      Here's what this usually means -

      I worked on a game jam with some new people a few months ago. I just wanted to make sure that my gameplay and AI code was doing what it was supposed to do. This would have to interface with code from other teammates as well, so it was important to test and check for bugs. This was the result.
      That's not what I'm going to talk about today though.
      I'm going to take a different angle on "programmer art" - not the joke art that programmers often use, but the fact that there's a LOT that a programmer can do to improve the visual appeal of a game. I believe some of this falls under "technical art" as well.
      My current job kind of forced me to think in this capacity.
      I was tasked with visualizing some scientific data. Though this data was the result of years of hard work on the part of scientists, the result was unimpressive to the untrained eye - a heap of excel files with some words and numbers.
      There are very few people in the world who can get excited by seeing a few excel files.
      My job? To make this data exciting to everyone else.
      My task was to visualize connectome data for a famous worm known as C. Elegans, made available by the wonderful people working on the OpenWorm project.
      Part of the data parsing to read and display the data as a worm's body with neurons on it was done by my teammate. My main task was to improve the visuals and the overall graphical quality.

      The first thing that comes to mind is using HD textures, PBR materials and high-poly models. Add in a 3D terrain using a height map, some post-processing and HDR lighting, and BOOM! Gorgeous 3D scene. I'm sure you've all seen loads of those by now.
      Except, almost none of that would really help me.
      The idea was very abstract - neurons and connections visible in a zoomed-in, x-ray-like view of a worm. I don't think rolling hills would have helped me much.
      I had no 3D modelling skills or access to an artist - even if I did, I'm not sure what kind of 3D models would have helped.
      As a result, what I've made isn't a gorgeous 3D environment with foliage and god-rays and lens flares. So it's not applicable in every case or the perfect example of how a programmer can make a gorgeous game.
      But, it does provide a distinct viewpoint and result. The special sets of constraints in the problem I had to solve led to this.
      So here's what I actually did:
      The 7 things I did to improve the visuals of my Unity game
      1. Conceptualizing the look
      This could be considered a pre-production step for art or any visual project. Ideally, what should it look like? What's the goal? What are your references?
      In this case, the viewer had a hologram-like feel to it (also there were plans to port it to a HoloLens eventually). I liked the idea of a futuristic hologram. And the metaphor of "AI bringing us towards a better future".
      So what were my references? Sci-fi of course!
      My first pick was one of my favourite franchises - Star Wars. I love how the holo-comms look in the movies.

      Holograms became a key component of my design.
      This is a HUD design from Prometheus that I found on Google -

      In this case, the colours appealed to me more than the design itself. I ended up basing the UI design on this concept.
      Key takeaway - Your imagination is the very first tool that helps you create impressive art. Use references! It's not cheating - it's inspiration. Your references will guide you as you create the look that you want.
      2. Shaders can help you achieve that look 
      I had some shader programming experience from University - D3D11 and HLSL. But that work had been about building a basic graphics engine with features like lighting, shadows, and some light post-processing. I had done some light Shader programming in Unity before as well.
      What I really needed now was impressive visual effects, not basic lighting and shadows.
      I was really lucky that this was about the time Unity made Shader Graph available, which made everything much easier. I can write Shader code, but being able to see in real time what each node (Which can be considered a line of code) does makes it so much easier to produce the effects you want.
      I familiarized myself with all the samples Unity had included with this new tool. That wouldn't have been enough though. Thankfully due to my previous experience with Shaders, I was able to make some adjustments and improvements to make them suit my needs.
      Some tweaking with speed, scaling, colours, and textures led to a nice hologram effect for the UI panels.

      I wanted the viewer to feel good to interact with as well, and some work implementing a glow effect (alongside the dissolve effects) led to this -
      Key takeaway - Shaders are an extremely powerful tool in a Game Programmer's repertoire. Tools like Unity's Shader Graph, the old Shader Forge asset, and Unreal's material editor make Shaders more accessible and easier to tune to get the exact look you want.
      PS - Step 5 below is also really important for getting a nice glow effect.
      3. Visual Effects and Animations using Shaders
      I was able to extend the dissolve and hologram shaders to fake some animation-like visual effects.
      And a combination of some timed Sine curves let me create an animation using the dissolve effect -
      The work here was to move the animation smoothly across individual neuron objects. The animation makes it look like they're a single connected object, but they're actually individual Sphere meshes with the Shader applied to them. This is made possible by applying the dissolve texture in World Space instead of Object Space.
      A single shader graph for the neurons had functionality for colour blending, glow, and dissolve animation.
      All of this made the graphs really large and difficult to work with though. Unity was constantly updating the Shader Graph tools, and the new updates include sub-graphs which make it much easier to manage.
      Key takeaway - There is more to shaders than meets the eye. As you gain familiarity with them, there are very few limits to the effects you can create. You can create animations and visual effects using Shaders too.
      4. Particle systems - more than just trails and sparks
      I have no idea why I put off working with the particle systems for so long!
      The "neurons" in the viewer were just spheres, which was pretty boring.
      Once I started to understand the basics of the particle system, I could see how powerful it was. I worked on some samples from great YouTube tutorials - I'm sharing a great one by Gabriel Aguiar in the comments below.
      After that, I opened up Photoshop and experimented with different brushes to create Particle textures.
      Once again, I referred to my sources of what neurons should look like. I wanted a similar look of "hair-like" connections coming out of the neurons, and the core being bright and dense.
      This is what it looked like finished, and the particle system even let me create a nice pulsating effect.
      Part of my work was also parsing a ton of "playback data" of neurons firing. I wanted this to look like bright beams of light, travelling from neuron to neuron. This involved some pathfinding and multi-threading work as well.
      Lastly, I decided to add a sort of feedback effect of neurons firing. This way, you can see where a signal is originating and where it's ending.
      Key takeaway - Particle systems can be used in many ways, not just for sparks and trails. Here, I used them to represent a rather abstract object, a neuron. They can be applied wherever a visual effect or a form of visual "feedback" seems relevant.
      5. Post-processing to tie the graphics and art together
      Post-processing makes a HUGE difference in the look of a game scene. It's not just about colours and tone, there's much more to it than that. You can easily adjust colours, brightness, contrast, and add effects such as bloom, motion blur, vignette, and screen-space reflections.
      First of all, Linear colour space with HDR enabled makes a huge difference - make sure you try this out.
      Next, Unity's new post-processing stack makes a lot of options available without impacting performance much.
      The glow around the edges of the sphere only appears with an HDR colour selected for the shader, HDR enabled, and Linear colour space. Post-processing helps bump this up too - bloom is one of the most important settings for this.
      Colour grading can be used to provide a warm or cool look to your entire scene. It's like applying a filter on top of the scene, as you would to an image in Photoshop. You can completely override the colours, desaturate to black and white, bump up the contrast, or apply a single colour to the whole scene.

      There is a great tutorial from Unity for getting that HD look in your scenes - if you want a visible glow you normally associate with beautiful games, you need to check this out.
      Key takeaway - Post processing ties everything together, and helps certain effects like glows stand out.
      6. Timing and animation curves for better "feel" 
      This is a core concept of animation. I have some training in graphic design and animation, which is where I picked this up. I'm not sure about the proper term for it - timing, animation curves, tween, etc.
      Basically, if you're animating something, it's rarely best to do it with linear timing. Instead, you want curves like this -

      Or more crazy ones for more "bouncy" or cartoon-ish effects.
      I applied this to the glow effects on the neurons, as I showed earlier.
      And you can use this sparingly when working with particle systems as well - for speed, size, and similar effects. I used this for the effect of neurons firing, which is like a green "explosion" outwards. The particles move outwards fast and then slow down.
      Unity has Animation Curve components you can attach to objects. You can set the curve using a GUI and then query it in your C# scripts. Definitely worth learning about.
      Key takeaway - Curves or tweens are an animation concept that is easy to pick up and apply. It can be a key differentiator for whether your animations and overall game look polished or not.
      7. Colour Palettes and Colour Theory - Often overlooked
      Colour is something that I tend to experiment with and work with based on my instincts. I like being creative, however, I really underestimated the benefits of applying colour theory and using palettes.
      Here's the before -
      Here are some of the afters -
      I implemented multiple themes because they all looked so good.
      I used a tool from Adobe for palettes, called Adobe Colour - link in the comments.
      I basically messed around with different types of "Colour harmony" - Monochrome, triad, complementary, and more. I also borrowed some colours from my references and built around that.
      Key takeaway - Don't underestimate the importance of colour and colour theory. Keep your initial concept and references in mind when choosing colours. This adds to that final, polished look you want.
      Bonus - consider procedural art
      Procedural Generation is just an amazing technique. I didn't apply it on this project, but I learned the basics of it such as generating Value and Perlin noise, generating and using Height maps for terrains, and generating mazes.

      Procedural art is definitely something I want to explore more.
      A couple of interesting things (Links in the "extra resources" section below) -
      Google deepdream has been used to generate art. There's an open-source AI project that can colour lineart. Kate Compton has a lot of interesting projects and resources about PCG and generative art. I hope this leads to tools that can be directly applied to Game Development. To support the creation of art for games. I hope I get the opportunity to create something like that myself too.
      These 7 techniques were at the core of what I did to improve the visual quality of my project.
      This was mostly the result of the unique set of constraints that I had. But I'm pretty sure some famous person said: "true creativity is born of constraints". Or something along those lines. It basically means that constraints and problems help channel your creativity.
      I'm sure there is more that I could have done, but I was happy with the stark difference between the "before" and "after" states of my project.
      I've also realized that this project has made me more of an artist. If you work on visual quality even as a programmer, you practice and sharpen your artistic abilities, and end up becoming something of an artist yourself. 
      Thanks for reading! Please like, share, and comment if you enjoyed this article.
      Did I miss something obvious? Let me know in the comments!
      Extra Resources
      OpenWorm project
      Great tutorial by Gabriel Aguiar
      Unity breaks down how to improve the look of a game using Post processing
      Another resource on post-processing by Dilmer Valecillos
      Brackey's tutorial on post-processing
      Adobe Colour wheel, great for colour theory and palettes
      An open-source AI project that can colour lineart
      A demo of generative art by Kate Compton
      Note: This article was originally published on LinkedIn. If you like it, please click through, get in contact, and consider connecting.

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!