Scuba Chibi: What’s Next?

In as much as I would like to move on to my next project, there are still a few things I need to finish with Scuba Chibi:

1. Android Support

Android friends, I haven’t forgotten about you.  I’ve tried out the game on Android, but it appears that Ad Mob and Phaser.js are not working well together.  If I remove Ad Mob, then the game loads fine.  I might have to look into using another Ad Mob plugin that works in Phonegap, or maybe I’ll do some Javascript magic without a library.  We’ll see.  There are also some resizing issues that I would need to take care of.  The game does not resize to the screen for my Android tablet.  This will be fun…

2. Suggestions?

I’ve had some suggestions as far as leaderboards, more enemies, and more backgrounds.  All are possibilites!  🙂  Any other suggestions?  🙂

Stay tuned for my upcoming blog post when I do my Postmortem #2 – Data and Analytics!

Scuba Chibi Released to the iOS App Store!

Scuba Chibi is now available on the iOS App Store!  Check it out!

https://itunes.apple.com/us/app/scuba-chibi/id970197009?ls=1&mt=8

appstore

Other links:

Scuba Chibi website:  http://melkybee.com/scubachibi/

Facebook page:  https://www.facebook.com/scubachibi

Twitter:  https://twitter.com/scubachibi

SlideDB:  http://www.slidedb.com/games/scuba-chibi

Scuba Chibi Postmortem #1: The Technical Learnings

I can finally say that Scuba Chibi is done and will soon be released to the iOS App Store!

As simple as this game is, it actually took me a whole lot longer to finish than I had expected.  Most of it was due to finding the free time to actually work on it.  But it was a lingering item on my To-Do list and I wanted it done and over with so that I can move on to my next project.  🙂

Nevertheless, from a technical and artistic standpoint, it was fun to work on.  It was a game that I had made with Phaser, Javascript, and Phonegap Build.  I do Javascript for work and I have played around with some small Phaser examples, but I am new to Phonegap Build.  So there would be times when I ran into some issues here and there and after googling for some solutions, I could not find any, so I resulted in doing a bit of trial and error.  That is where my blog comes into play.  I’ve always thought that my blog would be my way to remind my future self on how to do things.  Because let’s face it, I have a bad memory :-).

So here is a compilation of technical things that I have learned along the way while making Scuba Chibi:

Also, here are some blog entries for the art that I made for the game:

So, look out for my game Scuba Chibi, coming soon to the iOS App Store! 😀

Resizing Sprites to Fit Screen Resolutions Using Phaser

When I started Scuba Chibi, I made the mistake of making sprites small, and then scaling them up to fit larger screen resolutions.

game.stage.smoothed = true; // render crisp art
game.stage.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;

One problem is that they never scaled up at all. They remained small instead of resizing to larger resolutions. I had to do something more than those 2 lines of code.

But if they did scale up, I realized a potential second problem — the sprites would be artifacted and not crisp and clear. So, it’s best to create sprites that are really large and then scale them down for lower resolutions. Luckily, I use vector art, so resizing them (I used Flash to draw the images in the first place, and then used Flash to resize them 4x larger and then exported them as PNG’s) was not a problem at all.

So, I thought about the larger resolutions to support. I was at first thinking of my own device which was really small, 960×640, but it appeared to show things even smaller, at 480×320. So I resized everything to 4x larger. That means the base dimensions are now 1920×1280. And that is my baseline for all the sizes of my sprites.  1920×1280 is what is considered 100% width and 100% height.

Here are some examples of that in my code:

var GAME_WIDTH = screen.height,
 GAME_HEIGHT = screen.width,
// 1920x1280
 BASE_WIDTH = 1920,
 BASE_HEIGHT = 1280;
// add a chibi to the screen - 360x360
this.chibi = game.add.sprite(0, 0, 'chibi');
this.chibi.scale.setTo(((GAME_WIDTH/BASE_WIDTH)*360)/360, ((GAME_HEIGHT/BASE_HEIGHT)*360)/360);
this.chibi.anchor.setTo(0.5, 0.5);
this.chibi.x = GAME_WIDTH/2;
this.chibi.y = (GAME_HEIGHT/9)*4.5;
this.chibi.smoothed = true;

The actual chibi.png is 360×360. scale.setTo() considers “1” as being being “100%.”

The formula is this:

this.chibi.scale.setTo(((GAME_WIDTH/BASE_WIDTH)*BASE_CHIBI_WIDTH)/BASE_CHIBI_WIDTH, ((GAME_HEIGHT/BASE_HEIGHT)*BASE_CHIBI_HEIGHT)/BASE_CHIBI_HEIGHT);

GAME_WIDTH and GAME_HEIGHT is synonymous to the width and height of a device’s resolution (notice they are set to screen.width and screen.height above).

So if my device is 480×320, let’s try inputting the numbers:

this.chibi.scale.setTo(((480/1920)*360)/360, ((320/1280)*360)/360);

becomes

this.chibi.scale.setTo(0.25, 0.25);

which is what we want. 1/4 of 360 is 90, and that was my chibi’s size in the first place in a 480×320 screen.

The iPhone 6 is 1334×750.  Let’s input the numbers for that:

this.chibi.scale.setTo(((1334/1920)*360)/360, ((750/1280)*360)/360);

which is:

this.chibi.scale.setTo(0.6947916666666667, 0.5859375);

You’ll notice that the chibi will no longer be proportional in an iPhone 6, but that is one of the things to accept when developing for multiple devices.

My Adventure Jam Entry: The Homebound Predicament

For the past week during my free time, I have been working on a point-and-click adventure game in Javascript as part of the Adventure Jam, a game jam on gamejolt.com.

The Homebound Predicament Title Screen
The Homebound Predicament Title Screen

I developed this game in Javascript and used the Phaser game engine.  I chose Javascript because I was already comfortable using it and I write in it everyday at work.  I chose Phaser because I was in the mindset of it since I have been using it with my other game, Scuba Chibi.

As far as artwork, I drew everything in Flash.  I chose Flash because it was the only vector art program that I had, and I wanted to be able to resize things if needed without getting any artifacts.  I decided to use a black-and-white sketching style primarily because I didn’t have much time to make clean lines and to color, and I also liked the look of it.

Since my free time was very limited and I am but a one-person team, my game design was cut down by about 80%.  I initially had 6 scenes, but as the days went by, I had to cut that down to 3.  I initially had 10 collectible items, but that went down to 2.  I definitely wanted to keep the jar, though, because of its ability to interact with other objects such as filling it up with liquids and emptying them out into other objects.  I also had about 5 endings at first, but then I cut that down to 2.  Ultimately, I just wanted to have a playable and complete game, even if it was short.

Eventually, I would like to expand the game and put back in the things that I had to take out in order to meet the 4/17 deadline.  So, your feedback and comments are greatly appreciated!  Thanks for playing!  🙂

Gamejolt Link:

http://gamejolt.com/games/adventure/the-homebound-predicament/60296/

Scuba Chibi: Playing with Colors

I’ve been playing around with the colors for the game. I was going for some vivid colors, rather than muddy, to show a sort of fun and playful feel in the game.  I’m sure after some playthroughs, these may change, but it’s a start.

player-colored

fish-colored seal-colored
jellyfish-colored

I’ve found that having a “color legend” can be quite helpful.  Sometimes I find colors that I really like, but after changing around some things in the color wheel, that color becomes lost.  So here, I have them saved somewhere for future reference.

color-legend