Guest post: Hex LED and CoronaBlitz #2

12 March 2014

Guest post: Hex LED and CoronaBlitz #2

Brent Sorrentino
Guest Bloggers

Today’s guest post comes to you courtesy of Sergey Lerg, creator of Corona-built games Cubic Run and Laser Flow. In this post, Sergey discusses his experience as a participant in CoronaBlitz #2 and how he managed to make a full game in under a week.

sergey I just participated in CoronaBlitz #2 and not only did I enjoy it, but I managed to create a complete game, Hex LED, in just under a week!

My first game, Laser Flow, is also a child of a game jam. Six months ago, I participated in the GlitchGames Game Jam, produced Laser Flow, and since then my game has provided many hours of puzzling gameplay to players around the world.

“Make a game in 4 hours,” they say. Well, it’s a challenge but it’s not impossible. If you have your idea in mind before coding, you can indeed implement it in under 4 hours using Corona. Laser Flow took me a month to finish because it has a lot of levels, however Hex LED didn’t need as many. I decided to keep this game simple and lightweight.

Fun fact #1: On the app icon, the green line is larger than red or blue, yet sometimes it appears smaller due to an optical illusion caused by the shape of the icon.

Gameplay

hex-rgb-screen The theme for CoronaBlitz #2 was “energy/energize,” so I considered RGB LEDs (Light-Emitting Diodes) and how to play with their colors. Each color component requires different energy to light up, and the more energy you have, the more colors are powered. The goal is to combine energy and get as many lights as possible. Essentially, my concept was a blend of Triple Town, Threes, and 2048.

Hexagonal boards provide a lot of variety to the gameplay. When I created Hex LED, my score was around 10,000 and I thought that it was nearly impossible to score more than 20,000. However, my friend treser2 from the #corona IRC channel beta-tested the game and managed to score about 24,000. I was amazed because I never thought somebody could score so high! Ironically, a few days later, I scored more than 30,000 — the trick is getting two 4096 tiles and collapsing them together.

Fun fact #2: Initially there was only one tile set — RGB LEDs — but later I decided to add conventional Arabic numbers because some people had troubles playing with the RGB set. Later, I also added beautiful Chinese numbers, which have since become my favorite.

Hexagonal Board Math

To learn how to work with a hexagonal map, I read a great tutorial from RedBlocks Games. The most amazing thing is that the tutorial is interactive — it’s truly one of the best tutorials I’ve ever seen.

I chose to use the Axial Coordinate System for my game and it was the right decision. Doing the math for moving the tiles and finding possible moves was much simpler using this coordinate system. The more challenging part was making the tiles move and collapse according to the rules. At the beginning, not all tiles are moving, so tiles didn’t always collapse when they had to, and sometimes there were gaps and overlapping tiles. But, after a few days, I managed to fix it and gameplay became as smooth as I hoped.

Fun fact #3: The Chinese tile set consists of Chinese numbers from 1 to 10, however there are no standalone hieroglyphs for 11 or 12, so I used 100 and 1000 instead.

Useful Code and Tips

Swipe Recognition

Usual left and right swipes are detected by looking at the event.x - event.xStart value, however for my game I had to use a radial coordinate system to detect the correct swipe. Basically, I calculate the angle with finger slides on the screen. Here’s part of my touch listener:

if ( event.phase == 'moved' ) then
   local dx, dy = event.x - event.xStart, event.y - event.yStart
   local distance = math.sqrt(dx ^ 2 + dy ^ 2)
   if ( (distance > 50) and self.lastSwipe ~= event.id ) then
      self.lastSwipe = event.id
      local angle = math.round(math.deg(math.atan2(dy, dx)) / 60)
      if ( angle == 3 or angle == -3 ) then
      elseif angle == 0 then
      elseif angle == 1 then
      elseif angle == 2 then
      elseif angle == -1 then
      elseif angle == -2 then
      end
   end
end

if ( event.phase == 'moved' ) then

local dx, dy = event.x - event.xStart, event.y - event.yStart

local distance = math.sqrt(dx ^ 2 + dy ^ 2)

if ( (distance > 50) and self.lastSwipe ~= event.id ) then

self.lastSwipe = event.id

local angle = math.round(math.deg(math.atan2(dy, dx)) / 60)

if ( angle == 3 or angle == -3 ) then

elseif angle == 0 then

elseif angle == 1 then

elseif angle == 2 then

elseif angle == -1 then

elseif angle == -2 then

end

Screenshot Problem

When I was preparing the store listing for the Google Play Store, I received a “Your APK seems not to be designed for tablets.” message. This report was a puzzle of its own. After hours of research, I figured out that Google Play doesn’t like my screenshots because they have too much white space. In order to avoid this issue, your first 7” tablet screenshot must be filled up with something. So, I added some promo text to it and it passed the test, although it took me awhile to figure out how to position the text so it both looks good and Google approves of the screenshot.

config.lua

My config.lua file is interesting. It uses pixel-perfect settings for all iOS devices and some Android devices, then relies on 320×480 “letterbox” mode for anything else.

local h, w = display.pixelWidth, display.pixelHeight
if (w == 1024 and h == 768) or (w == 960 and h == 640) or (w == 1136 and h == 640) or (w == 2048 and h == 1536) or (w == 1280 and h == 720) or (w == 480 and h == 320) then
   while w > 700 do
      w = w * 0.5
      h = h * 0.5
   end
   w, h = h, w
else
   w = 320
   h = 480
end
application = {
   content = {
      width = w,
      height = h,
      scale = 'letterbox',
      fps = 60,
      imageSuffix = {
         ['@2x'] = 1.2,
      }
   }
}

local h, w = display.pixelWidth, display.pixelHeight

if (w == 1024 and h == 768) or (w == 960 and h == 640) or (w == 1136 and h == 640) or (w == 2048 and h == 1536) or (w == 1280 and h == 720) or (w == 480 and h == 320) then

while w > 700 do

w = w * 0.5

h = h * 0.5

end

w, h = h, w

else

w = 320

h = 480

end

application = {

content = {

width = w,

height = h,

scale = 'letterbox',

fps = 60,

imageSuffix = {

['@2x'] = 1.2,

}

Thank You!

Hex LED already has great reviews and some people are really addicted to it. Thanks to all of the Corona folks in the #corona IRC channel for helping me iron out the small issues. And of course, thanks to Tyraziel and Corona Labs for organizing the awesome CoronaBlitz game jam!

Remember my other game prototype, the endless runner Cubic Run? If you download and rate Hex LED, I’ll send you the source code for Cubic Run!

Hex LED in the App Store — https://itunes.apple.com/app/id830218249
Hex LED on Google Play — https://play.google.com/store/apps/details?id=com.spiralcodestudio.hexled

Brent Sorrentino

[email protected]

Brent Sorrentino is a full-time Developer Evangelist and technical writer who assists others with game development, code, and in overcoming other challenges to help them bring their app dreams to life.

10 Comments

Rauri
Posted at 17:24h, 12 March

Do you not have at least a little respect to mention the original game that you have quite clearly used as inspiration?

Another word that could be used is plagiarism.

This emerging world of developers lifting ideas with no credit is quite sad.
- Brent Sorrentino
  Posted at 17:29h, 12 March
  
  Hi @Rauri,
  Apologies for this… I edited the post for Sergey, and forgot to mention his citation on this point. He mentioned that he took inspiration from Triple Town, Threes, and 2048. I don’t know if any of those are “the original game” that you speak of, but that is what he wrote.
  
  Brent
- Brent Sorrentino
  Posted at 17:46h, 12 March
  
  On that note, I have added this citation to the article.
- Lerg
  Posted at 17:47h, 12 March
  
  Oops! Didn’t see it got deleted. Here is my original paragraph:
  
  “So the theme was energy/energize, I took RGB LEDs (Light Emitting Diodes) to play with their colors. Each color component requires different energy to light up, the more energy you have, the more colors are powered. The goal is to combine energy and get as many light, as possible.
  In other words I took a concept found in Triple Town, Threes, 2048 and wrapped it around a hexagonal board.”
  
  And I am not ashamed I took their ideas. I nicely moved them into hexagonal world and made something different instead of making yet another clone. My game plays for sure differently than any of these games.
  - David
    Posted at 18:19h, 12 March
    
    Picasso said it best:
    http://www.brainyquote.com/quotes/quotes/p/pablopicas380469.html
iWalter
Posted at 09:59h, 13 March

How do we notify Lerg after we download & rate his Hex LED app to get the Cubic Run source code?
- Lerg
  Posted at 11:06h, 13 March
  
  Write me via forums http://forums.coronalabs.com/user/273472-lerg/
  Thanks!
Ed Maurina
Posted at 12:11h, 13 March

@Sergey

Wonderful article. Thanks for sharing your code insights and the useful backlinks to Amit’s stuff.

As always, I learned several new things. I especially love the elegant ‘swipe recognition’ code.
iWalter
Posted at 15:48h, 13 March

Great game, I just posted a review. I will contact you via the forums as you suggested.
Scott
Posted at 19:12h, 17 March

@Rauri, I believe they call that trolling. A lot of games take the same mechanics from other games. I’m sure that NONE of your games use the mechanics from any other game ever created. Everything you’ve ever done must be 100% original right?

And I believe this is called trolling you 🙂

Guest post: Hex LED and CoronaBlitz #2