Text Editor Tips: Some Useful Brackets Extension

Brackets is an open source and free-to-use text editor and primarily being used by web developers and designer. I mainly use Brackets for doing the web front-end development. I fell in love with the built-in live preview feature.

Here are some extensions that I found really useful:

• Emmet
• Brackets Snippets
• Custom Work

I will update this post if I find more

Scala levels: beginner to expert, application programmer to library designer

This is a good reference for someone who wants to be a library designer. I see that the original website of article (here) is no longer be maintained. So, I put this on my blog so other still can read this. Please enjoy.

Scala is a bit of a chameleon. It makes many programming tasks refreshingly easy and at the same time contains some pretty intricate constructs that allow experts to design truly advanced typesafe libraries. This means that, depending at what piece of code you look at, Scala might look very simple or very complex. But which pieces exactly are easy for beginners and which are more advanced?  In the end, everybody will have their own yardstick. Nevertheless, I am trying here to give a rough categorization.

I hope this will help newcomers to the language decide in what order to pick subjects to learn, and that it will give some advice to teachers and book authors in what order to present the material.

I assume that programmers have already a good knowledge of Java, so we can take at least pre-generics Java 1.4 for granted. If that's not the case, some of the entry-level concepts such as classes and exceptions would need to be moved to more advanced levels.

Also, I distinguish between Scala application programmers and Scala library designers, because the required skill sets are really quite different. A first shot at a categorization has been discussed last month on the scala-debate mailing list.The current categorization incorporates some of the suggestions that were made then. So, here we go:

Level A1: Beginning application programmer

• Java-like statements and expressions: standard operators, method calls, conditionals, loops, try/catch
• class, object, def, val, var, import, package
• Infix notation for method calls
• Simple closures
• Collections with map, filter, etc
• for-expressions

Level A2: Intermediate application programmer

• Pattern matching
• Trait composition
• Recursion, in particular tail recursion
• XML literals

Level A3: Expert application programmer

• Folds, i.e. methods such as foldLeft, foldRight
• Streams and other lazy data structures
• Actors
• Combinator parsers

Level L1: Junior library designer

• Type parameters
• Traits
• Lazy vals
• Control abstraction, currying
• By-name parameters

Level L2: Senior library designer

• Variance annotations
• Existential types (e.g., to interface with Java wildcards)
• Self type annotations and the cake pattern for dependency injection
• Structural types (aka static duck typing)
• Defining map/flatmap/withFilter for new kinds of for-expressions
• Extractors

Level L3: Expert library designer

• Early initializers
• Abstract types
• Implicit definitions
• Higher-kinded types

As I wrote above, the skill sets required from application programmers and library designers are really quite different. But if I should throw them into the same baskets, I would group like this:

• A1, A2/L1, A3/L2, L3

That is, intermediate application programming is about on the same level of difficulty as junior library design, and advanced application programming is on the same level as senior library design.

To clarify: One can program very productively in Scala on level A1, which one should be able to pick up in a day or so, coming from Java. Mastering A2 will doubtlessly increase programmer productivity. A3 is for expert programmers with more specialized tasks, not everyone needs to get to that level. The same holds for library design. There are great libraries designed with the tools on level L1 and L2. Some libraries require L3 elements such as implicits and higher-kinded types, but a library does not automatically get better if it uses these elements -- often the opposite is true.

Game Development: Text 101 - Text Based Game With Finite State Machine

This time, I've created a really simple text based game that allow the player to progress state to another state by choosing some options. Some options might take the player to the final state of the story and that's where the game end.

A. What I learnt from this course session are:

1. Importing image assets 

To import an image asset, we just need to drag and drop the image from your directory explorer to the asset panel. And if you're working on a 2D game make sure the texture type is "Sprite (2D and UI)" by selecting the image asset in the asset panel and checking the texture type in the inspector.

Unity Game Development - Checking Texture Type in Inspector Panel

2. Adding GameObject to the scene 

In this game, I'm using game object called UI Text. UI Text is an object to display text in the game. To add UI Text: Open Game Object menu -> UI -> Text

Unity Game Development - Adding UI Text to Game Scene

3. Toggle layers

In Unity's Game Scene, there are several layers that you can toggle to be visible/invisible. You can find that toggle in the top right corner of Unity.

Unity Game Development - Toggle Layers

4. Canvas

Canvas is where all the game will be operating in. So if you put GameObject such as Text UI outside canvas, that object won't be visible during game play mode.

5. Interacting with GameObjects in Scene Panel 

In the upper-left of unity you can find some useful tools to interact with game object on the scene. Those tools are Hand (Shortcut Q), Move (Shortcut W), Rotate (Shortcut E), Scale (Shortcut R), and UI tool (shortcut T).

Unity Game Development - Tools to Interact with Game Objects

6. Setting camera background color

The camera uses blue as its default background color. We can change it easily just by selecting the Main Camera object in the Hierarchy and change the background color from the inspector panel. In this case, I changed the background color to be black.

7. Add a new component/script to UI Text object

If you want to give your UI text a behavior you can add a script to your game object. One way to add a script is:

1. Select your game object from Hierarchy (In case of my game, it is a UI Text object).
2. Go to your inspector panel and scroll to the bottom. You will find add component button on the bottom.

Unity Game Development - Add Component/Script to Game Object

3. If you want to use existing script, choose "Scipts". But if you want to create new script, choose "New Script".

8. Properties in a assets class will be accessible trough inspector

In order to access your UI Text in your code, you need to create a property in your class for example:

Then to connect your property to the Game Object, you need to select your UI Text object from Hierarchy and then check your inspector (but before that you need to add script to your game object). From the inspector, you'll find a Text Controller (Script) component, and you can set the Text property to the UI Text object as seen in screen capture below.

Unity Game Development - Connecting Text Property to UI Text Game Object

9. There are two main views in Unity (Scene View and Game View)

As you build your game, you can switch from the Scene View to the Game View to preview how it will look in its platform-specific final build. Learn how to preview and test your game as you work. That makes it really fast and easy to try things out.

What are scenes and Game Objects?
You can think of a scene as a level of your game (but it could also be another element, like a main menu, for example). Game Objects are the environment, cameras, lights, and all the other elements in the scene.

Tips:

• To get into the center of game object: go to Hierarchy -> double clicks on the game object and you will see your game object in the scene view
• We can connect game object to the script by creating a public property in the script and then connect that property with GameObject by simply choosing from the inspector.

B. Developing Text 101

In the game development process itself, we are using what we call the Game Design Document (GDD). GDD is a document that outlines our game and its screens. We also learn about Finite-state machine (FSM). FSM is an abstract machine that can be in exactly one of a finite number of states at any given time. It can change from one state to another in response to external inputs.

Game State Diagram

Unity Game Development - State Diagram 1

Unity Game Development - State Diagram 2

In order to transition between states, player need to press a key represent by the state. For example in the first state diagram, player starts in a "cell" state. If the player press "M" key, the player will go to "mirror" state. In code, each state is represented by enum as shown in snippet of code below.

In Update() method, we handle all currentState of the player and create methods to handle the state transition. You might get an idea by looking at this snippet of code.


These are some screenshots of my game. In first screenshot, you can see when the player in the "cell" state and then transitioning to the second state Mirror by pressing M.

Unity Game Development - Player in First "cell" State

Unity Game Development - Player in Second "mirror" State

If you are interested of making this kind of game please take a look at my Github repo below for a complete code:
https://github.com/ibanezang/text101

You can just clone the code and run it on your local machine. I hope you enjoy reading my writing. Can't wait to share more about my game development journey! Thank you.

Game Development: Adding .gitignore File to Unity Repository

I'm using git as my version control for my unity projects. In my second project, I have problem with vast amount of file changes generated by Unity because I forgot to add the .gitignore to my repository. In this post, I want to describe two ways of adding the correct .gitignore file to you unity project's repository.

1. Via Github Web Interface 

When working with my Number Wizard game project, I created the git repository via Github web interface and I can choose to add .gitignore from the Add gitignore dropdown list.

Unity Game Development - .gitignore via Github web interface

2. Add .gitignore For Existing Project

As I mentioned above, in my Text 101 project, I had a problem that git track all Unity's generated files as changes. Each time I changed something in the game scene, it generated thousands tracked changes by git. Here is my solution to that problem:

1. Find the correct gitignore file from this link. For Unity, I'm using this file.

2. Go to your repository folder/directory and create ".gitignore" file in the root of your repo folder.
In windows you can just create and empty file or in Mac you can use "touch .gitignore". In Linux or Mac based system, ".gitignore" file by default would be hidden. You can use "ls -a" to see your file or you can follow this simple tutorial to show hidden files on Mac.

3. Open your empty ".gitignore" file and paste this content and save the change:

4. Run the following commands on you terminal:

• git rm -r --cached . 
• git add . 
• git commit -m ".gitignore is now working"

Please be aware on the first and second commands there is [dot] character there.

Actually this solution works for any gitignore files do you want to add to your repository. If you find this tutorial useful, please leave a comment bellow. Thank you.

Game Development: Text Based Game "Number Wizard"

The online course I've taken were introducing the feature available in Unity using a very simple text based game. The game was called "Number Wizard".

What I learnt from this game were:

1. How to change the layout of Unity's panels.
2. Unity's folder structure.
3. Unity's scene and objects.
4. How to print logs into Unity's console using print() method.
5. Unity's game application flow.
• We can attach a script to an object.
• That script inherited MonoBehaviour
• It has Start() method that will be called once in the beginning
• There is Update() method that will be called once per frame.
6. How to get input from keyboard.

While all those points are very obvious and basic, I think it is a good start to get to know them all in the beginning of this journey. So it will be a good foundation for me to go faster later.

About Number Wizard

Number Wizard is a game to guess player's number in mind.
Here is the game play of the game:

1. Player just need to think about one number between 1-10000.
2. The game will guess with a number.
3. The player need to answer whether that guess higher, lower, or equal.
4. If it is still not equal, the game will guess again until find the number of the player have in mind.

The Game implementation

The player can interact with the game using up arrow (tell the guess is higher), down arrow (tell the guess is lower), or space (tell the guess is equal). The game will end if the player press space key. The complete implementation of player's interaction can be seen in line 29-44.

To find the number, we need to implement binary search by calculating the middle value of min and max bound as you can see in FindMid() method in line 64.

You can see the complete project in this  repository of mine:
https://github.com/ibanezang/NumberWizardGames

Please leave comment and suggestion if you find this post interesting. Thank you :)