Lynda.com: Become a Unity 2D Developer (Day 7)

UNITY 5: 2D BUILDING A TILE MAP EDITOR 
(...continued part III)

CREATING A TILE BRUSH

Create the Tile Brush

Remember the days in class in which the teacher is up there with the lesson and suddenly breaks into a quick burst of information with no follow-up?  This lesson was like that, only because it focused on creating the initial setup for the Tile Brush.  Ultimately, this script does absolutely nothing because there aren't any game elements referencing the script.  At this point, it is an unused asset.  Nevertheless, below is the script to create/setup the Tile Brush.
Instantiating the Tile Brush in the Scene

In efforts to continue documentation, the screenshot below follows the same thread from the lesson prior.  Meaning, it is still a part of the initial setup without any game elements referencing the script(s).




Customizing the Tile Brush

I'm kind of amazed how the subtitles for each lesson seems to be a bit off.  This lesson focused on the process of writing the code for creating and destroying the brush instance.  Meaning, to render or remove the tile from the Unity canvas area.  However, the code does not seem to be working on my version of Unity.  Perhaps I'm not catching a typo or something, but I'm moving forward as it does not seem to have impacted the overall learning process.



Updating the Brush's Sprite Preview 

Much like an anime-mech team, this is where it all comes together.  The scripts I setup prior, finally starts to show what was originally intended.  Below is a screenshot of the code and a clip of the overall result.  Notice that whenever a different portion of the texture is selected, it is now updating within the Scene palette.




MOVING THE BRUSH

Getting the Mouse Position

In regards to getting the mouse position, it will determined by utilizing a script to calculate the mouse inside of the scene.  Ray casting will help determine the position of the mouse through collision/hit detection.


Moving the Tile Brush

Now it is time to wire up the brush, in order for it to follow the mouse in scene view.  For this lesson, I was able to modify the script so the selected brush texture will now display within the Scene editor window.  In addition, when the selected tile is changed to a different section of the loaded texture, it also updates within the Scene window.  However, there is an unwanted behavior.  The brush should only show the texture within the grid, not to exceed when outside of the grid area.



Keeping the Brush in the Tile Map's Bounds

This particular lesson was math intense.  In order to calculate the mouse and restraining it within the bounds of the grid,  the TileMapEditor script had to be modified.  It now includes a grid size formula associated with Vector2.  The result is successful.  The brush no longer renders outside of the grid within the Scene window.  It is important to note that the auto-text feature in the MonoDevelop application tends to be counter intuitive, specifically with this particular exercise.   Each time I would simply input the letter "x" or "y", it would attempt to auto-fill the entry.  Unfortunately, it messed up my code and I had to go back multiple times to review and ensure that all errors have been corrected.




FINISHING UP THE TILE MAP

Creating a Group for Tile Instances

This exercise was not particularly thrilling.  Nevertheless, much like the other portions of this tutorial, it is a vital part of the setup process.  At this time, the script below enables the GUI to display the Tiles instance within the Tile Map layer.



Adding Drawing to the Tile Map

The script below enables the ability to use the tile brush in a relatively intuitive manner.  Now that the script has been compiled correctly, I was able to paint the selected texture onto the canvas.  It is important to note that the texture will only draw onto the grid when the user holds down the Shift key.



Erasing Tiles

This exercise was quite brilliant.  I say this because it went through smoothly and as intended.  Perhaps it is because it had few code commands that triggered the autocomplete feature in MonoDevelop.  Needless to say, below is the code that determines if the grid contains a texture.  If so, it will also detect if the user is holding down the "ALT" key.



Clearing All of the Tiles

The follow-up tutorial focuses on establishing a one-button solution for clearing the entire tile grid.  The C# script below creates a button for clearing the grid in one click.  In order to accomplish this, I had to create the ClearMap method.




Cleaning Up the Tile Map

This process was not too difficult.  However, it did seem to be all that intuitive.  Ultimately, when a new TileMap is created, it does not populate the embedded layers.  At this time, it does not show any indication of separation between tile and painted texture.  In order to fix this, the code needed to be cleaned up within the TileMapEditor.




CLEANING UP THE TILE PICKER

Optimizing a Texture2D

When it comes to 2D sprites rendering in a 3D environment, it can sometimes display artifacts and unwanted distortions.  Notice the screenshot below, there are some tearing between some of the tiles.  The lesson addresses this issue through a script in order to manually resolve the graphical anomalies.



Unfortunately, this part of the tutorial focused on using an image editing tool like Photoshop.  Although I watched this segment, I did not bother following as I am already well versed in the techniques being demonstrated.

Tile Picker with Padding

As seen below, the Tile Picker window does not capture the right size when selecting the tile.  Ultimately, the Tile Picker grid needs to be adjusted to fit the new padding to the graphic.  Below are 3 screenshots of the code that has been implemented to accomplish the padding adjustment.






Conclusion

Honestly, this tutorial was very challenging for me.  Not because it was too technical or too advanced, instead I found it difficult to stay engaged in the tutorials.  It also does not help that the MonoDevelopment application kept predicting the wrong text.  In addition, there were a few lessons in which the code did not execute at all.  However, when moving to the next lesson, the file is identical and still would not work.  I believe this is a short coming of the software.  Originally, these tutorials were build with Unity 5 in mind.  At this time, the closest version I can find to Unity 5 is Unity 2017 release.  All complaints aside, I have learned a great deal within a small time frame.  Although there is more work and far more things to study, I am very eager to move forward.  

Comments

Popular posts from this blog

JavaScript 30: JavaScript Drum Kit

Lynda.com: Become a Unity 2D Developer (Day 11..Sort of)

Back On the Coding Horse