Color By Number (Unity) Blog


9/22/23 Blog Post

     Greetings everyone! So it has been quite the past two weeks here with Unity in the industry. I won't go into it as there are many things to bring up about it and all that. For now, I will just say that I am going to be closing this project as I am not comfortable using Unity at this time and will be spending some time learning the Unreal Engine.

     I have wanted to learn Unreal for quite some time and my original plan was to finish this game and then make it again in Unreal to learn the engine with a laid-out plan. Now seems like the right time to just dive into Unreal with everything going on and just my general feelings as Unreal is more desirable to enter the industry as well.

     I don't know when I will post again but I will try to start posting as soon as I can on my next Unreal project. Hope you all look forward to it and have a great amazing day, week, month, year, and life! Until next time I hope you all continue to chase your dreams and show the world your firey passion!

9/8/23 Blog Post

     Greetings everyone and welcome back to another sprint update! I was pretty motivated this sprint to get something nice to show off for today! I worked on adding more white-out areas and filling up the selectable colors to really get this game on track.

     I readjusted the 2nd selectable color to display the information correctly now that I have put in the white-out panels for the secondary spot and I added in the colors for spots 3 and 4. From there I adjusted the UI colors for the background to add some polish to the game seeing as I had all the information I needed from the UI tests I ran.


     I coded the completed colors section to be displayed once the associated selectable color bottle runs out. That way the player knows when there is no more of that color in the image and can move on to the next color. I am very happy that the grid layout organizes everything in order by the associated number as well to make things nice and clean!

     Now it is time to finish up getting these white-out panels on the image and finish coding in the selectable and completed colored sections. With that done next would be 3 important features every color-by-number game needs. A zoom feature for the image to better see some numbers (as evident from my misclicks around the eyes), a save system so the player's work gets saved and they don't have to start over, and finally the image system to take work in progress images as the player colors in the art to be displayed on the level selection screen.

     A bit more to do but overall nothing too difficult now that I have a rhythm in place to keep progress running smoothly. Things are looking great for the October 1st deadline I gave myself to have this first level fully completed! Thank you for sticking with me and I hope you look forward to the next sprint where this level will be on the edge of completion! Hope you have a great rest of the month, year, and day!

8/25/23 Blog Post

     Welcome to another sprint update blog post! I had planned to work on quite a bit to show off but I haven't had the time as I have been taking care of sick family members since the last blog post. However, I am not distraught by the lack of time as I am happy to take care of my family members and I was able to work on some programming to get the main portion of the game underway and am mainly in the process of updating the artwork to get the main scene put together.

(Artwork Progression with adjusted colors and numbering)

     I programmed the completed color section UI to draw data correctly from the Color Data Scriptable Objects to set their parameters correctly as shown in the image. The next step is to code the level manager script to display the completed colors UI when the color selection UI is empty (all the numbers in that color are colored in). This shouldn't be too hard as I just need to add a few lines and possibly a function to check if the color section is 0 and then set its active to false while setting the completed color equivalent's setactive to true.

     Mainly for the artwork I adjusted the color data object on bottle 1 to the correct data and added the rest of the white-out sections (now with numbers!) to the image to start testing some more of the game's functionality. Otherwise, there isn't that much more to share as I would have liked to but that is just how life is sometimes.

     I hope you all enjoyed this little sprint update! I will definitely have more to share in the next one as I plan on finishing, at least this first level, by the end of September and hopefully the whole game by then as well! I still have big plans and can't wait to show off the ideas I have in mind and I hope you all are having a lovely rest of your month, day, week, and year!

8/11/23 Blog Post

     After some scheduling adjusting, I should be getting some more progress to show off in each of these sprints which I am very excited about! For this sprint, I spent some time working on the UI player feedback and getting the game's core gameplay functional.

     Firstly, I got a basic pause screen working so the player can choose to go back to the main menu if they want to work on another art piece or resume the current drawing. I will be adding a quit/exit game button to the pause screen in the next sprint as I originally didn't think it was needed but after some thought process it would be better to have it in each level for ease of convenience for the player. I will also code it so the level saves its progress and current image progress before the game closes.


     The next thing I tackled was getting the color selection area to provide some form of feedback to the player about which color they currently have selected. For this, I decided to make the selected bottles larger for the player to see which is selected. I am thinking of adding an effect to the bottle as well so it glows somewhat for added feedback for the player in case the size isn't as straightforward as I believe it to be. To get the numbering system for the selected bottle colors, I changed the grouping to horizontal so the bottles appear in order from left to right as it is more intuitive for players. I also added some code to check the screen size and based on the ratio the height of the scrollable areas adjusts to fill up the space as best as possible!


     The last thing I worked on was getting the white-out portions of the image to be clickable so they can be removed if the correct selectable color is selected as shown in the video. This was a bit trickier of a task as I have the whiteout image pieces as large PNG images so the dimensions line up correctly with the colored image. This is where the challenge came from as there was still a background, even though transparent, that was present, and clicking anywhere would cause the white-out image to be removed. To adjust this I did some research and found out that the sprite needed to have a different type and the alpha needed to be specified in the code so only a certain mass would count as the image and not the transparent portions. I show the code below and this code will be attached to each whiteout image on screen.

(Button Pressed Script for the White-Out Numbers)

     Those were the main aspects I worked on for this sprint with some added ideas for the next sprints tasks! The idea is to get all the whiteout portions on the image, fill out all the color data objects, and set up the color completed area.

     That is the plan and I can't wait to show off everything I get done for the next post! I am very happy and excited to be making some decent progress here while learning so many neat coding aspects for development. Thank you so much for reading and I hope you have been having a great time with the blog posts so far!

7/28/23 Blog Post

     There wasn't much completed for this Sprint as I was on vacation for about a week, but it was well worth the trip to get my creativity flowing in higher spirits as I am recharged and ready to get working on completing this project!

(Game Screen - Level UI Updates)

     I primarily worked on the UI portion of things to get the general structure shaped out so I know what to code and what can be done through Unity's UI capabilities. The main reason for this is that I initially thought I had to code in the scrollable areas (Dark Blue Sections on both sides) to expand and shrink when colors were added or deleted from the areas. After some research, I found out that the scrollable areas were able to do that feature themselves if I had the contents within a group format. It is a great feature and I decided to move forward with it and finish the layout of the screen so I can get a better grasp on the features I would need to code in or use the Unity UI features for more learning opportunities. This is also why I added the "Completed Colors" section on the right side.

     Here is a progress video displaying the scrolling areas and how it auto-adjusts the size based on the number of contents.


     For the next Sprint, I will work more on the coding side of things and work on some aspect-ratio adjustments. Currently, the current size works well for most aspect ratios in 1080p. However, when I try running the game on a wide monitor aspect ratio I noticed that the scrollable areas extend down past the screen so the player isn't able to view/click on the last two colors on either side. My goal is to set up some aspect ratio checks when the level is opened to adjust the height on the scrollable areas based on the screen aspect ratio. Then I will work on the level manager script and set up the level screen layout.

     Thank you all for reading this update and I hope you enjoyed what you have seen in the updates so far! Can't wait to get working on some more exciting things so I can get a bigger blog post for you all! Thanks for reading and hope you are having a wonderful life!

7/14/23 Blog Post

     This "Sprint", as I am going to refer to the two weeks' blog updates to correlate with industry practices, I was a bit caught up working on the secret project that I am contracted with that I didn't get too much done for the Color by Number project. However, there was some progress in the coding department where I worked out a beginning Scriptable Object code to hold the data parameters for all the selectable color UI objects. This is still a work in progress as I might add another variable or two to be stored until then the current variables in the scriptable objects are three colors (for the bottle, inner paint, and the number displayed on the bottle colors), the number to be displayed on the bottle, and the total quantity of the particular numbered white panels on the image. 

(Current Color Scriptable Object Code)

     I decided that I wanted the background of the color UI panels to have an opaque color on them to make them resemble a bottle. I want the player to get a feeling that they are actually using "paint" to color in the images and I felt that having the paint in a "bottle" would be a neat way to go about it. I also plan to have the paint's fill reduce itself with each successful color of the image to show that the paint is being used as a way of showing progress and gratification since the player can see how well they have done coloring the image so far and later when I get a completed UI section I feel it will add to that overall feeling of gratification as well.

     I also created the Colors Script that will be used on the selectable colors UI game objects that will serve as the main hub for setting all the UI data/variables and adjusting them all as the game is played. It has its own boolean that makes sure when the level is first loaded that it sets the current quantity based on the total quantity since the image doesn't have any color on it yet. Now I could have just made two integer variables in the Colors Script that hold the current and total quantity numbers but I felt that the total quantity needed more protection since it would be used to adjust the paint colors fill amount as well as I will discuss later. It could still go in the Colors Script but my thought process felt that the Scriptable Object would be a safer location for that variable.

(Colors Script Part.1)

(Colors Script Part. 2)

     The way I have the program adjust the fill amount of the UI object is through a quick function that converts the current quantity variable into a float, to get decimals to make the paint fill display accurately and divide by the total quantity. This function is currently not called anywhere, but the plan is to have the white-out objects have a function that, when clicked while the selected color is the correct number, will call the adjustFill() function and then delete itself to reveal the colored image underneath it. That is going to be the next step on my to-do list to get everything blocked as well as finishing the adjustFill() function as when there are no more things to paint I will have it display the completed bottle on the right side of the image with a checkmark on the bottle instead of the bottle number being displayed for added gratification for the player as they can see the progress they are making.

     Here is a quick video of the game progress with the color Scriptable Object data being applied to the color UI game objects.


     The blue portion on the Selectable Colors section is a temporary background, just like the red for the UI Panel, as it is a scrollable vertical panel for the players to scroll up and down to select the colors they want to work on. I have planned to scale down the scrollable area when colors are completed so that way the players don't scroll through empty space as the game progresses. This will also be applied to the right side of the screen, the completed section, but the scrollable area will grow based on the amount of completed color objects.

     The final update is that I will work on for this next sprint to get a level manager script going that will hold lists of the color game objects or Scriptable Object Data that will correspond to the color UI objects so when a color is completed it will adjust the lists and move the lower selectable colors up and organize the completed colors so they display in the numbered order upon completion. Some added organization methods as I feel the game would need that extra touch to make it stand out compared to other color-by-number games and I am going to use lists as it will be easier to sort them by numbers than arrays in the long run. I would go with arrays but since the game won't be that large in scope I don't think it is necessary to save memory/processing power by going the array route here.

     That is all for this sprint blog report and I know it wasn't a big update but I do think it is a good start. I hope you all enjoyed and I hope you look forward to the next blog update as well! Thanks for reading!

6/27/23 Blog Post

     I am starting this a bit later than normal but better late than never! The project is still early in development and I will make blog posts every other week or so to review my progress and document any cool editions I have made/discovered for this game.

(Simple Main Menu UI Layout)

      Currently, I have just created a simple starting menu UI layout to lead to the level selection and quit the game if the player doesn't want to play anymore. Just a simple design for now as I tried to get to the actual coding venture of this project being the levels themselves and if I think of anything cool to add I will put it in the main menu later. 
    
     By clicking the Levels button the player gets taken to the level selection screen which will show the levels, currently 4 but might add more later if I get more art from my friends, and will start off with question marks (?) when a player starts the game and hasn't selected a level yet. Once the player loads into the level, I would like to have the level selection image be a screenshot of the current progress on the non-colored image. This will also get updated every time a color is filled in to reveal the colored image below.

(Level Selection Menu - Levels will change to the proper image once loaded in)

     One of the challenges I will be facing is getting the primary camera or a secondary image camera in the scene to take screenshots or snippets of the image as progress is made through a function call. I currently have no idea how to set that up but this is something that I feel is necessary for a Color By Number game and to engage the player more as they can see their progress not just in the level but on the level selection screen as well. Now I thought about just having it be the colored-out version until the image is fully colored as those are simple images I could load into Unity, but I wanted the challenge and learn something new while giving the player the full experience that they deserve.

(Level progress with some work on the color selection options on the left of the screen)

     Lastly, the level screen is coming along well with UI placement and making sure it scales correctly with different screen sizes. I am working on the left side of the screen now to have all the selectable colors displayed where the numbers and white colored circles are adjustable by the script as scriptable objects. The plan will be to get an array hooked up to each of them and when one color is completed it will move the rest of the colors up while making a newly completed section on the right side of the screen.

     That is my current progress and plan for now. I will post more updates showing the current progress and code when I get some of those hooked up correctly. Thanks for reading and I hope you have a beautiful day, week, month, and year!