An InfiniteViewPager for Android

Hey folks!This time around I'm going to be writing a programming post related to my adventures in Android!

Le Problème:

A ViewPager in Android does not support carousel-like scrolling of its items. We can scroll from the first item to the last item but not directly from the last item back to the first item and vice-versa. See the image below to get an idea of what we'd like to achieve.

La Solution:

I've seen several versions of an InfiniteViewPager that present hackish solutions to this problem. Standing on the shoulders of giants, I decided to take a stab at this problem and have finally come up with a non-hackish way of doing things. The basic concept is to truly cycle the fragments in the ViewPager. The Android Studio project has been hosted on github at https://github.com/angelorohit/InfiniteViewPager. Go grab it! Have you got it? OK. What we need are the two JAVA files InfiniteViewPager and InfiniteViewPagerAdapter.

The InfiniteViewPager provides its own OnPageChangeListener. This listener performs circular rotation of the fragments in the ViewPager's adapter whenever a new page is selected. If the user has navigated to the last fragment in the ViewPager, then the first fragment is removed from its position in front and is placed at the back. Similarly, if the user has navigated to the first fragment in the ViewPager, the last fragment is removed from its position at the back and is placed in front.


The InfiniteViewPagerAdapter simply stores a List of Fragments for the InfiniteViewPager.

Contrainte:

Since we are actually cycling between the fragments in the ViewPager, this can only work if there are 3 or more fragments in it. The code has been written such that if the ViewPager has less than 3 fragments in it, no circular cycling is performed, although the user can still swipe back and forth between the existing fragments in the ViewPager.

That's it! Hopefully, someone will find this InfiniteViewPager useful! Happy coding!

Rendering iOS gradients with UIGradientView

Hi folks!

Recently I found the need to render gradients in an iOS app that I've been working on. Now, rendering gradients in a UIView is straight-forward enough. Simply override - (void) drawRect:(CGRect)rect and draw within it using CoreGraphics. This got me thinking. There must be lots of programmers out there who would wish to do the same thing. What if we could come up with something reusable? Without much ado, I give you UIGradientView - A subclass of UIView that supports rendering of gradients.

Here's a breakdown of the concepts used in rendering gradients with UIGradientView.

What is a Gradient Stop?

Let's say we want to vertically transition from White to Red and then from Red to Black. We start with White at the top and transition to red halfway through. Then we go from red at the half position, all the way to black at the bottom. Your mind's eye should have a picture like the one below.

A Gradient Stop has an offset and colour. The offset is the percentage of the position at which the colour is the strongest. For example, in our multiple colour gradient example above, we would need three Gradient stops.

1. GradientStop with offset 0 and colour White.
2. GradientStop with offset 50 and colour Red.
3. GradientStop with offset 100 and colour Black.

What is a Gradient Overlay?

A Gradient overlay represents the overlay of a gradient in a UIGradientView. There can be multiple overlays in a gradient. Each overlay specifies the gradient stops to be rendered. There are two types of gradient overlays; namely, LinearGradientOverlay and RadialGradientOverlay.

LinearGradientOverlay

A LinearGradientOverlay is used to overlay a linear gradient in a UIGradientView. The user of this overlay can specify the direction in which the linear gradient should be rendered. Linear gradients are rendered vertically by default.

typedef enum {
    LinearGradientDirection_Vertical,
    LinearGradientDirection_Horizontal,
    LinearGradientDirection_TopLeftToBottomRight,
    LinearGradientDirection_TopRightToBottomLeft,
    LinearGradientDirection_Max
} LinearGradientDirection;

RadialGradientOverlay

A RadialGradientOverlay is used to overlay a radial gradient in a UIGradientView. Radial gradients are always rendered at the center of the view and are circular. The user of this overlay can specify the radius of the gradient. By default, the radius of the radial gradient will completely fill the view. The radius can also be set to the following enum values:

typedef enum {
    // The rendered radial gradient will completely fill
    // the UIGRadientView
    RadialGradientOverlayOptions_FillOuter = -1,
    
    // The rendered radial gradient will fit the inside
    // of the UIGradientView.
    RadialGradientOverlayOptions_FillInner = -2,
    
    RadialGradientOverlayOptions_Max = -3
} RadialGradientOverlayOptions;

UIGradientView

This gist adds both a radial gradient overlay and a linear gradient overlay to a UIGradientView. By default, the radial gradient will be rendered to fill the view and the linear gradient will be rendered vertically from top to bottom. This is the expected result for the above gradients.

Presets

The project comes with a default set of gradient presets that can be loaded via the UIGradientView(Presets) category class. If you don't wish to use any of the presets, simply exclude the following files from your project:

• UIGradientView+Presets.h
• UIGradientView+Presets.m
• Gradient-Presets.plist.

Feel free to checkout or fork the project from github. Feedback / suggestions are very much welcome!

Game Review : Mark of the Ninja (PC)

Mark of the Ninja, developed by Klei Entertainment and published by Microsoft Studios, is a 2D side scrolling game with a focus on stealth tactics. While there do exist many other games in the same genre, Mark of the Ninja stands out with its innovative game mechanics and alluring art direction. The game was initially released for the XBox 360 and subsequently made its way onto Windows via Steam.

Plot
You play as a Ninja who has been marked by the Hisomu clan with a special ink that grants you access to unique powers and abilities. Unfortunately, these powers come at a price as they will ultimately drive the “marked one” insane. After a western arms corporation slaughter many inhabitants in your ancestral home, the master of the clan orders you to set things right by assassinating the head of the corporation. Throughout the game, your faithful companion Ora, guides you in the ways of the Ninja with helpful hints and tips that always keep the game fast paced and the events flowing. The story features some interesting twists and although you do see the end coming a mile away, that doesn't make it any less epic.

Controls
The controls for the PC version of the game involve using a combination of keyboard and mouse. The keyboard gives you total command over character movement whether it be dodging past lasers, jumping over rooftops or peeking through vents. The mouse allows you to target objects in the environment or perform stealth kills. The latter has an interesting control scheme. When performing a stealth kill, you first sneak up on an unsuspecting enemy and press the left mouse button. The character then goes into strike mode where everything on the screen fades out except for the hunter and his quarry. The on-screen notification then indicates a direction in which the user must swipe the mouse. Swiping in the indicated direction will let the Ninja perform a clean kill. If you swipe in the wrong direction, the execution will be carried out in an unprofessional manner allowing the prey to kick and scream while being gutted. This could attract the attention of nearby enemies.

Performing a stealth kill

Gameplay
Being a Ninja, you naturally adopt the ways of the sword and prefer stealth over direct confrontation. Entering into direct combat usually ends up in you dying because guards can fire bullets while you only have a sword. Every scenario in the game allows you to take down your victims or sneak past them using guile. Your basic tools involve a trusty sword for combat, a grappling hook and an unlimited supply of darts. Apart from these basic tools, you can also equip distraction and attack items. Distraction items let you effectively manipulate your foes by making noise or concealing yourself. Attack items are intended to harm or kill your enemies.

Two interesting notions that play out well in Mark of the Ninja are light and sound. Guards cannot see you in darkness (although dogs can sniff you out!). When you step into the light, however, guards will immediately spot you in their line of sight. This makes for some interesting gameplay as you take out spot lights or navigate around them just so that guards don't see you. Sounds in the game are visually represented as circles. A lot of actions in the game make sound - heavy footsteps, speech, breaking objects or birds. This can be used to your advantage to distract or prepare an ambush for guards as they investigate the source of a noise.

AI
While the AI in Mark of the Ninja certainly isn't bad, it is far from perfect. Guards follow scripted patrol patterns which allow you to time your attacks or steal past them. Enemies seem hardly perturbed when a guard goes missing from his post. Likewise, guards sometimes don't notice when a light goes out, as long as they don't hear or see it happening. While an overly aggressive AI might detract from the gameplay experience, it does make the player find such situations a tad bit odd. This is because the enemy AI is surprisingly good in other areas! Guards become suspicious when they catch a glimpse of you ducking behind cover and dogs start tracking your position once they get a whiff of your scent. There is nothing more satisfying than stringing up an enemy only to watch unsuspecting guards cringe in terror when they chance upon the dead body!

Environment
In Mark of the Ninja, you learn to effectively use the environment to your advantage by concealing yourself in dumpsters, behind pots, or under vents. You can also throw darts at lights or other objects in the environment to distract enemies. The environment isn't always your friend though. Dangerous trip wires, lasers, booby traps and motion sensors force you to watch your step. You can also take down enemies from vantage points or concealed areas.

Graphics
The graphics in Mark of the Ninja are certainly gorgeous. Character art appears to be inspired by Klei’s previous franchise - Shank. Level backdrops span sprawling cityscapes to rainy industrial settings and sandstorm deserts. Jawdropping animations look and play the part too! Interesting cutscenes are interspersed between missions and keep you engrossed in the game. The only minor fault here is that there aren’t enough stealth kill animations. The same animations are particularly noticeable because as a bad-ass Ninja, you’d certainly want to take out every fool that stands in your way!

The environment art delivers a surreal effect to scenes

Score system
The score system in Mark of the Ninja is based on points and seals. Points can be earned per mission depending on your actions. For example, stealth killing enemies give you points and hiding their bodies give you more points. If an enemy spots you and sounds the alarm, you lose points. By reaching a specific score in a mission, you get rewarded with seals.

Skill upgrades and unlockables
There are plenty of hidden secrets in Mark of the Ninja. These come by way of scrolls and artifacts. Scrolls reveal the history of the Hisomu clan in the form of haiku while artifacts simply award you points. Seals can be spent to upgrade your character skills or buy new types of distraction and attack items. New character skills allow you to perform stealth kills with amazing ease and become very handy as the game progresses. The game also features 6 unlockable costumes that you can earn by performing various mission achievements (not related to Steam achievements). These achievements might have you doing things such as “Take out 20 lights” or “Terrorize a guard into shooting another guard”. Each costume features both unique traits and shortfalls.

Verdict
Mark of the Ninja is not a game entirely without shortcomings. The lack of a multiplayer component lessens the engagement time for any player. There is, however, a New Game Plus mode but this doesn’t introduce anything new in the game. That being said, Mark of the Ninja is one of the finest stealth games to be had and playing it will genuinely be a fun-filled experience. The game is available on Steam for 14.99 USD. This is in stark contrast to other 60 dollar games that can give you a much less bang for your buck. So, what are you waiting for? Sheath your sword and shroud yourself in darkness. Become a Ninja!

Do you think this game review was fair? Let me know in the comments!

Amateurs and smartphones

Recently a friend of mine picked my thoughts on how mobile phones are changing the landscape of photography. The way I see it, the recent wave of smartphones are indeed redefining the amateur photography scene. So, here go my two cents in a bulleted list:

• Ease of use

I had bought a Sony DSC TX-10 but I rarely use it because it's more handy to just whip out my phone when that interesting shot presents itself. This is in spite of the fact that the Sony DSC is a portable series of cameras. It's just that my iPhone is more portable.

• Availability

The mobile smartphone does more than just photos and videos. For that reason, you always have it on you when travelling. Digital cameras may not always be available unless you're going out on a prepared photo session. As an amateur photographer, you'd want to take photos of things like an impromptu group gathering or something interesting you saw on your way to work.

• Apps

An interesting feature of smartphones is the apps. Apps provide primary-level image editing functionality. With just a few optional tweaks, I can make the colours in an image really pop or I can do something artsy. I can crop, rotate and apply some after-effects as well. An app on my smartphone can never replace Photoshop or LightRoom but there is something to be said for the ability to "spice" up my photos on the go. A great example of a professional photography app is Camera+ for the iPhone.

• Social features

Another thing that mobile phones have going for them is their ubiquity and a connection to the internet. Almost everyone has a smartphone nowadays and it makes sense that people would want to share these photos with the world. What smartphones allow is simple click-and-share or maybe click-tweak-and-share functionality. There's no lengthy process of copying images to your computer, editing them and then uploading the processed images to your favourite social network. Some services like Instagram have even gone a step further and tied their app to a social network exclusively for mobile photos.

In my humble opinion, smart phones are great if you want to take simple low-res pics on the fly. It would be very hard to take those really awesome shots that we see on shutterstock or in model portfolios with standard smartphones. For example; you'd have to be really pro to manage a bokeh with an iPhone 4S. That being said, future advances in technology may well prove me wrong.

(A couple of photos I took with my iPhone 4S)

Git stashing and why it's awesome!

You're halfway through implementing something on a super-awesome project and haven't committed yet. All of a sudden, your manager runs to your desk and informs you of a major bug in the released version of your project. He says, "Hold the presses! Stop whatever you're doing right now and fix the issue on the release branch..." You look at him curiously, wondering if he just had a beer for lunch.

In an SVN world, you'd have to track what files were being modified and export them out to another location. Rather annoying, to say the least, because it defeats the entire point of using a version control system. You could also create a temporary branch, commit your broken changes and then merge that branch with your working branch afterward. An inelegant solution.

However, you're in a Git world, baby! Enter 'git stash'. Stashing allows you to "file away" some or all of your uncommitted changes. Stashes are pushed into a stack and can be popped back later when you want to resume work.

You sit at your desk while pondering the effects of beer after lunch. Then you look down at your terminal and type:

$ git status -s
 M superawesomefile.cpp

Ah! There is one file that you were working on (there could have been more) but you don't want to commit it just yet. You smile shrewdly to yourself and type:

$ git stash save "mysuperawesome changes"
Saved working directory and index state On master: mysuperawesome changes
HEAD is now at b6c8a3f My last superawesome commit message

But wait, are you sure that your changes were stashed? What if they weren't? Paranoia leads you to type:

$ git stash list
stash@{0}: On master: mysuperawesome changes

$ git stash show stash@{0}
 superawesomefile.cpp | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

You list all of your stored stashes with 'git stash list' and then view the files in your stash with 'git stash show'. Sure enough, your superawesomefile is there.

At this point, exuding some major swag, you switch to the release branch and fix the issue with amazing prowess. You then switch back to your working branch and proceed to get back your last stash with:

$ git stash apply
# On branch master
# Changes not staged for commit:
#   (use "git add ..." to update what will be committed)
#   (use "git checkout -- ..." to discard changes in working directory)
#
#       modified:   superawesomefile.cpp

You rise to a standing ovation as the crowd goes wild!

EDIT: My friend, Ananth pointed out that in an SVN world, it is possible to achieve stash-like behavior. You can perform a unified diff and redirect output to a file.

svn diff > /path/to/mysuperawesome_changes.diff

Later, when you switch back to the working branch, your saved changes can be applied back as a patch.

patch -p0 -i /path/to/mysuperawesome_changes.diff

Pretty handy that!

AGlossBar: A CSS-only progress bar with gloss.

Hey folks,

I think I've learnt enough CSS to be able to make reusable components. I decided to start off with something that I thought would be both fun for me to do and useful for others to use. AGlossBar is a progress bar with a glossy look. The progress bar only requires the use of CSS, no images. The interesting part for me was coming up with a nice way to make the component tweakable by the user without compromising on its glossy appearance. Another hurdle (most likely due to my CSS n00bness) was finding a cross-browser solution. So far, I've only managed to test AGlossBar on the latest stable builds of Chrome, Safari, Firefox and Opera.

The project has been hosted on github at: http://github.com/angelorohit/AGlossBar

If you use AGlossBar for anything, I'd love to know! Feel free to make a post in the comments here or fire an email to angelorohit[at]gmail[dot]com.

Happy CSSing!

Game Review - Shank 2 for PC

The original Shank was a 2D side scrolling beat-em-up released back in 2010. The game was well received by gamers and even grabbed an IGF Game Finalist award. With Shank 2, independent developers Klei Entertainment, had to deliver on the promise of making a better sequel. It was clear that some of the elements reminiscent of the first game had to stay. It was also apparent that many of the quirks and missing features pointed out by the gaming community had to be taken into consideration. Having finished the campaign (on Easy of course), I must say that Klei have indeed managed to make a game worthy of being a successor to Shank.

Controls:
The controls in Shank 2 have been refined and made more PC friendly. Shank (the protagonist) can interact with the environment to a certain degree allowing him to flip switches that set off traps as well as pick up weapons dropped by fallen enemies. Ranged attacks are now much easier to perform and direct with a simple right-mouse click. Standard platforming elements like running, jumping, swinging and throwing have all been brought over from the first Shank. Gameplay is well paced in Shank 2, allowing the player to learn the basics of combat and environment traversal before being pit against anything serious.

Combat:
Combat is part of the core gameplay in Shank. The player has three weapons to use at any given time. A heavy weapon, a ranged weapon and explosives. Apart from these three weapons, Shank also has a normal attack (called his Shank attack). Unlike the first Shank, swapping between weapons is not allowed. This is one tiny feature that I miss because it really does make a difference in a fight. Also, there is no way for the player to guard against attacks, although dodging is possible. Dodging attacks is pretty hard as there is only a split second within which to dodge enemy attacks and god-forbid if there are multiple enemies trying to whack you all at once. I suspect that fewer players will use dodge and will mostly rely on jumping over or away from enemies to avoid incoming attacks.

One of the new moves that I really like in Shank 2 is the counter attack. This move is similar to God of War style moves where the player can quickly do something spectacular when presented with an on-screen notification. In Shank 2, if an enemy is about to attack and has an exclamation mark over his head, the player can perform an insta-kill by pressing a single key. It is also possible to counter-attack some of the boss moves, although this doesn't let you insta-kill them (that would make things too easy, I guess). The good ol' pounce and grab attacks have been carried over from the original Shank. The grab attack does exactly what it says. Shank can grab an enemy standing next to him and then do whatever he feels is fun. Those fun things include slamming the enemy against the ground, firing a shotgun at point-blank range or simply throwing the enemy onto oncoming hostiles. Unlike the first Shank, the player can now also grab bigger enemies and pound the hell out of them! The pounce attack allows Shank to leap over to an enemy some distance away and grab him. This move is especially useful when dealing with enemies that do some sort of ranged attack.

Graphics:
Like the original Shank, violence plays a major role in Shank 2. There are a plethora of ways in which to rain doom upon your enemies like shoving baseball bats down their throats, ripping them apart with a chainsaw or pistol-whipping them. This is definitely a nod to the genre and whole-heartedly embraces every adolescent fantasy that you might have. Gore and explosions are omni-present throughout the game. The original Shank was lauded for its art style and Shank 2 is no slouch either. Shank 2 follows the same 'El Mariachi' look but unlike its predecessor, it certainly plays the part too! Animations are fluid and the visual feedback from performing actions is exquisite. A lot of effort has also gone into the game environment with intriguing detail, weather effects and ‘Desperado’-styled silhouettes. Cutscene animations are interesting, to say the least.

Music:
The music in Shank 2 is simply wonderful. Jason Garner and Vince de Vera have outdone themselves using the nostalgic Shank theme as a set-piece. The music enhances the player’s experience with appropriate tension and action. Voice overs and environmental sound effects are also very effective. With the soundtrack for the first Shank already released, it’s only a matter of time before that of Shank 2 gets out.

Plot:
The original Shank didn’t have much of a story to it and Shank 2 does not attempt to improve things in this area. While the story-telling aspect of Shank 2 is certainly not bad, I felt that a few more questions about Shank’s past could have been answered. The cast of new characters like Corina (the female counter-part to Shank) could have also been fleshed out. The game features Rebel Intel. These are basically pamphlets that describe some of the game characters and their motivations but finding this information is somewhat akin to unlocking secret content by scouring levels. Another tiny peeve of mine is that I felt that the game could have been longer. The first Shank had an equally long campaign and an extra co-op campaign to go with it. The campaign in Shank 2 took a little over 3 hours to complete and left me lingering for more!

Multiplayer:
If the campaign is short, the game certainly makes up for that with an entertaining multiplayer survival mode. Klei Entertainment listened to their fans and went all out in implementing a great co-op aspect to the game which allows you to team up with another player and survive against waves of enemies. The survival mode can be played online or locally (the first Shank had a local only co-op campaign). Rather than bore you with incessant text about how Shank 2’s survival mode works, I’ll just point to this excellent tutorial video after the jump.

Unlockables:
Shank 2 has 16 different costumes to be unlocked by completing various single player and multiplayer objectives. The costumes are not simple re-skins. Each costume has a particular stat bonus associated with it making it crucial to your style of gameplay. For example, if you are more of a ranged attacker rather than an up-close melee brawler, then there’s a costume that will help you do more ranged damage. Shank 2’s Steam achievements also make for great gameplay. Ah, nothing like getting 60 pistol counter-kills, eh?

Verdict:
Shank 2 is high on thrills and will satisfy your thirst for gore. The single player campaign offers an entertaining but short experience. If you have a friend to play with online, then there’s loads more fun to be had in the survival mode! The game is currently priced at 9.99 USD (approx. 500 Indian Rupees) on Steam. Shank 2 is also available on Origin for PC, XBox and PS3. Grab the game from it's Steam page here!

Do you think this game review was fair? Please let me know in the comments!