Ideas Come Cheap

Sunday, April 6, 2014

Unity Endless Runner Tutorial #2 - Android Version

Original Tutorial
http://catlikecoding.com/unity/tutorials/runner/

My version of the game (Version Log)
http://www.hansadrian.com/Stuff/Endless%20Runner%20Tutorial/build.html

GitHub Gist (for full code files)
https://gist.github.com/HansNewbie/10005219/38e71e0c7358d15335412cbbbcdbb3facee36094

Completed Project Files (V0.6.1)
Buy this on Selz Selz powering ecommerce websites

For version 0.2, I added Android version - I updated the code with support for Android touch control. Check the Gist for the complete codes.

Read this post →

Saturday, April 5, 2014

Unity Endless Runner Tutorial #1 - Introduction

Topic: Unity Endless Runner Tutorial

I am trying to learn Unity all over again. I found this interesting tutorial from Reddit on endless runner. Here is the link:

http://catlikecoding.com/unity/tutorials/runner/

My version of the game could be found here:

http://hansnewbie.github.io/Stuff/Endless%20Runner%20Tutorial/build.html

Version Log:

https://github.com/HansNewbie/Stuff/blob/gh-pages/Endless%20Runner%20Tutorial/Version%20Log.md

I will try to improve the game bit by bit and share the code files via GitHub Gist. I will tag the posts with the same label as this (Unity Endless Runner Tutorial).

Also, to make the layout of my posts neater, I will use information box like below to pack the links together.

Original Tutorial
http://catlikecoding.com/unity/tutorials/runner/

My version of the game (Version Log)
http://www.hansadrian.com/Stuff/Endless%20Runner%20Tutorial/build.html

By the way, if you have not realized, I am using label/tag as topic of my post, so a series of post dealing on the same subject will have same label. Have a nice day :)

Thursday, March 27, 2014

Fractal Plant with Python Turtle

Topic: L-System

As described in http://en.wikipedia.org/wiki/L-system#Example_7:_Fractal_plant.

Here is the result:

The code could be found below from GitHub Gist.

Wednesday, January 15, 2014

NUS ModCrasher: Behind the Scene #3 - Social Widget in CSS

Topic: NUS ModCrasher

See the Pen Social Widget Bar by HansNewbie (@HansNewbie) on CodePen.

So this is the social widget that I made for NUS ModCrasher. I put the relevant code in CodePen so you could look at it and use it if you want (Tell me if you are using it for your site!). The effects are in pure CSS, but I use JavaScript to open the link as a pop-up window - much like other websites. You can customize what you want to share in the href link as stated in the respective social sites' documentations (the links are correct - Facebook button shares Facebook website, Google+ button shares Google+ website, Twitter button links to posting Test this button - but they are not working; I assume CodePen blocks it).

NUS ModCrasher: Behind the Scene #2 - jQuery/Twitter Bootstrap Copycat on scrolling result

Topic: NUS ModCrasher

GitHub
NUS ModCrasher on GitHub

Project
NUS ModCrasher on AppSpot

This is a long overdue post,but I will write it anyway. So I wanted to have the collapsible item in ModCrasher. Yos and I were using Bootstrap - thus jQuery - but I wanted a finer control of the scroll and I didn't use any other part of Bootstrap nor jQuery initially (Yos later used it to show the map on the result page). So I was thinking, "Why don't I try making it myself? Must be fun!!" So yeah, I made the collapsible result myself. I can't remember which code I looked at, but I think it was Bootstrap/jQuery code. I followed the idea, except being more general than that.

Read this post →

Sunday, January 12, 2014

Exact Age Calculator: Behind The Scene - Button With Pure CSS

Topic: Exact Age Calculator

So I was trying to make the button to calculate more apparent. I thought about it for a while and was reminded of what the button in NUS ModCrasher looks like. So I tried to make that using CSS only. Apparently, I could achieve similar result!

Here is the sample code snippet:

<!DOCTYPE html>
<html>
<head>
    <style>
    #button {
        cursor: pointer;
        text-align: center;
        width: 200px;
        padding: 5px;
        margin: 10px;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid #999;
        border-radius: 10px;
        background: #FFD119;
        background: -webkit-gradient(linear, left top, left bottom, from(#FFD119), to(#E6B800));
        background: -moz-linear-gradient(top, #FFD119, #E6B800);
        font-weight: bold;
        height: 28px;
        box-shadow: 0 -8px inset;
    }

    #button:hover {
        background: -webkit-gradient(linear, left top, left bottom, from(#E6B800), to(#FFD119));
        background: -moz-linear-gradient(top, #E6B800, #FFD119);
        margin-top: 13px;
        height: 25px;
        box-shadow: 0 -5px inset;
    }

    #button:active {
        background: #403300;
        padding-top: 10px;
        height: 20px;
        box-shadow: 0 5px #000 inset;
    }
    </style>
</head>
<body>
    <div id="button">This is the button</div>
</body>
</html>

To see it in action, you could go to my Codebits at http://www.codecademy.com/HansNewbie/codebits/PmVTjH.

Exact Age Calculator

Topic: Exact Age Calculator

Exact Age Calculator
on Codebits by Codecademy

I don't know how I came up with the idea, but I was wondering it would be cool to know exactly how old are you. The calculations are pretty rough (I don't count by birthday, but by year as 365 days and month as 30 days) and it has not been up to hour and minutes, but it is kind of working.

I was thinking it would be cool if it could be improved to prompt which country you are from then pull the data of the country's life expectancy, then we do a countdown how long do you have to live and make your dreams come true.

I am quite satisfied with it, though, especially with the button since that was actually an 'accident'; I didn't plan for it, but I thought it was hard to differentiate between the button and the Age box and I just did it on the fly.

Many thanks to Build A Calculator! track on Codecademy for helping in making this Codebits!

Have fun!

Saturday, January 11, 2014

Android Home Sample

Topic: Android Home Sample

GitHub
Home

Hey guys. I have been trying to play around with Android homescreen, but the sample code is too old for the current Android version that it won't even display well. I will try to improve the sample code bit by bit while adding styles that I want as well. This will take a very long time since I am kind of busy. Hopefully I can make what I want to use and see. :D