PKCLsoft
Where great things start…
  • Home
  • Blog
  • Money Up Credits
  • Crazy Balloons – Word List Gallery
  • Tap Times Tables
    • Times Tables Reports
    • Reviews
    • Suggestions and Credits
  • uAlertMe for iAlertU
    • Using uAlertMe for the first time
    • Network Settings
    • Other settings
    • Ready to Connect
    • Connected!
    • Configuring your Mac
  • Support
    • Crash reporting
  • Privacy
    • COPPA in the US
  • World of Hex Press Kit
Select Page ...

Category: Games

And now for something different...

pkclsoft May 7, 2022 Games, Opinion

A few years ago (gosh, is it 5?), I played a game called Journey on my kids Playstation 4. It was like no game I’d ever played before. Here I was, wondering around the sands and ruins of a civilisation lost to time with nothing but my ability to call, to search and discover, and, to fly.

https://thatgamecompany.com/journey/

This game, Journey, by thatgamecompany really changed my idea of playing games, and what I wanted from the experience of playing a game.,

I found the joy of the mystery, wanting to know more, to grow within the game, and to reach a goal, that mysterious mountain in the distance.

And once I’d completed it, I of course wanted more. I wanted to play more games like this. So I searched in vain; there just wasn’t anything I could find at the time that resembled the experience. The closest I came was a work in progress called Omno by Studio InkyFox, but at that time, it was years off.

https://www.playomno.com

And then, on the 13th of September 2017, at the iPhone 8 launch event, Apple and thatgamecompany announced the new game Sky (which later became Sky: Children of the light) which was to arrive on iPhone, iPad and notably, the Apple TV 4K.

I was hooked. I began watching for evidence of a launch date and then early in 2018 I managed to get a place as a beta tester. Once I had that place, and was able to play, admittedly, on my iPhone, and not a nice big Apple TV screen, I was both dazzled, and really happy.

Sky was and is, an amazing achievement. I spent around 2 and a half years as a beta tester for Sky. I and a number of very very dedicated players and testers spent countless hours in the game having fun, but also really working hard to help the developers hone and tune the game to be the best it could be.

For a core group of us, it was a pleasure to go in and play, and report findings. Before I left Facebook, I took a dump of my data. Looking back at that, I have 522 videos I’d recorded (amassing almost 21 hours of recordings), in some cases edited and uploaded to the Sky beta group.

They were fun times, and during that time, I’d been to a couple of ComicCon’s with my youngest child, and discovered cosplay whilst doing so.

I thought it would be neat to create a Sky cosplay.

One of the iconic things about Sky and the children that run around in that world is the cape. The cape is life in Sky, and it’s also the means by which one can fly. The cape charges when your child is close to light, or in clouds, and when it charges, there is a lovely animation.

Now before I continue I should point out that my experience as a beta tester is primarily with the original feathered cape. Somewhere around March 2020, thatgamecompany discarded the original cape in all its beauty because it apparently took too up many resources.

When all this happened, the capes became plain mono-colour capes with no decoration or shape. Some time after launch, complex capes began to creep back into the game, but to date, so far as I know, the original cape has not returned. What follows is my attempt to recreate the original cape for a cosplay outfit.

How to make a cape.

Plan | Design | Making the Cape | Electronics | Final Construction | End Result | Parts List

Step 1 – Plan

What I wanted, was to re-create the classic, original Sky cape in my favourite in-game colour, purple. But I wanted more than that. I also wanted it to glow, and to animate in a manner similar to that of the original cape. So what does that look like:

Charging a cape using light lighterflies

This meant electronics, and more specifically, LEDs that I could program. But it also meant fabric that would let me see the light showing through.

I also needed to learn how to sew.

I started by searching online to find out how to make a cloth cape. There are a lot of sites online that show you basic patterns and techniques. Here is the one I found most helpful:

https://www.wikihow.com/Make-a-Cape

Its not really all that hard; getting the basic measurements is the trick. In my case, because I wanted to put electronics into the cape I needed to factor that in as well.

🚨 Now, pay attention to that website when it comes to the neck, because this is one area I failed in. I forgot to allow for the next and how to cut it out. I think it’s something I could have fixed, but I decided not to when I created the cape originally. The thing was that I wanted a fold-over, like a collar and I didn’t know how to do that, so I left it in the too-hard basket and focused on the stuff I could do.

For me, I decided on a cape with a radius of 90cm. I’m tall, and so is my child, so this would allow the cape to hang to roughly the length as seen in the game.

The next thing for me was creating the cape design.

Profile showing the length of the cape in-game.

Step 2 – Design

Unfortunately, because the cape I was building was no longer in-game, I had to draw on my old recordings and screenshots to allow me to rebuild the cape design so that I could put it (somehow) onto fabric.

So I spent an inordinate amount of time trawling through my recordings, finding a collection of reference images (all very grainy) so that I could see with some clarity the pattern and layout of the cape.

Below is a good depiction with some clarity, showing the entire cape.

Original Sky Cape

Once I had this and a lot of other images ready, I set about recreating it in photoshop, shape, by shape.

I made the mistake at first by creating it as a circle, resulting in the following (showing where I saw myself adding the LEDs) :

Whilst this looks great, it’s completely wrong. When I printed this out, cut it out and tried to make it look like a cape, it was all wrong. Of course, I’d made the mistake of creating the design around how it would look when worn, wrapped around the Sky kid, not how it looks on a flat surface.

I realised that I actually needed to redraw the design on to a half circle. After all, when you look at your Sky kid flying, you don’t see a circle.

So after some more of hours in photoshop, I ended up with:

Now note a few things about the above diagram. First off there is a border outside the bottom of the petals:

The internal hem.

It’s important to remember that because I was putting LEDs inside this cape, it would essentially be like a pocket. I would end up sewing two large pieces of fabric together and then turning it inside out. Having this spare cloth there at around the edge gave me room to do the sewing without affecting the design.

And printing this, and playing with it as a cone, we get:

A printed version of the cape for testing.

Plan A

So, with a design that works, the next plan was to print out, to scale, each of the pieces that made up the cape pattern. You see, my plan was to re-create all of those designs by cutting out a piece of fabric of the right colour, and then sewing them all onto a large purple piece of cloth in the right pattern.

But before I did that, I needed to find the right fabric. So off to the local fabric store (in my case, Spotlight). I took with me, a small circle of LEDs with a controller chip to animate them in a manner similar to what I wanted. I wandered through the various isles of fabric, testing them for translucency, weight and atheistic feel.

Sky Cape Material Testing

So with fabric chosen, I decided with four in total:

The next step was to use my printed templates for all of the elements of the patterns on the petals of the cape to cut out all of the pieces so that I could then sew them onto the backing fabric.😲

All of the petal shapes cut out.
One cloth piece cut out, many more to go…

Note the colour differences in the paper pattern. My plan was to multi-layer the cloth to get the visual effect.

I went to the trouble of borrowing a sewing machine because I thought it would be 1. quicker, and 2, I’d get a better, more uniform stitch. The only machine I could find was quite old, and we couldn’t work out how to change the stitch. So my first and only attempt to use it as a test resulted in:

Some truly average sewing…

And soon after I started, I realised just how much of a task I’d set myself. I quickly discovered just how bad I am at cutting fabric, sewing fabric, and so on. It became obvious that the end result was going to fall far short of the vision I had in my mind.

Plan B

What could I do? Well, one of the things I’d seen my child do was put their artwork on a site called RedBubble where other people could then purchase items like socks, or stickers using my childs art.

I discovered that I could upload an image of the cape design, and have it printed on a large “wall hanging”! And by doing that I basically got out of having to sew all of the detail of the feathered pattern on the cape!

Here is a link to that wall hanging: https://www.redbubble.com/i/tapestry/Sky-Cape-Design-by-SkyFan/43661774.ODB3H

So after a week or so, the wall hanging showed up, and it was perfect! This would become the outer face of the cape. The fabric was a little thinner than what I’d planned to use/create in my Plan A, but it was worth it because it just saved me a great deal of stress.

The wall hanging as it arrived.
The wall hanging draped around some shoulders.

Back to Spotlight I went, and bought a large piece of heavy, dark purple fabric that would act as the back to the cape. It was time to get started.

Step 2.5 – Making the cape itself.

A half pita pocket, just like a cape...

Lets step back a bit (I know, this has being going on for a while already). The cape, because it needs to contain, and conceal the electronics, needs to be like a pocket, a giant, semi-circular pocket, sort of like a pita bread…

So to make the cape I needed to take the wall hanging, and pin it to the backing fabric, but with the patten face-down.

Lay the printed fabric out over the top of the backing fabric.
Make sure it’s face-down.
And pin the two together.

It’s important to be generous with the pins. You want the two pieces of fabric to be as one, so that there is no movement of one or the other as you sew them together.

The sewing begins.

This was the single longest process for me in the entire exercise of making the cape. Without a sewing machine I needed to sew the entire semi-circular outer edge of the cape, one stitch at a time. I also spent a bit of time, because I was hand sewing, finding out which stitch to use. I settled on the “Back stitch”. Here is a link to a good tutorial on how to do a back stitch:

How to Hand Sew a Back Stitch

Note that I’ve pinned along the outer area of that purple border that I mentioned earlier on. That keeps everything secure as I sew close, but not on the line between the border and the beginning of the printed pattern.

Sew outside the line.

The reason for this is that when you finish sewing and you turn it out the other way (so that the pattern is on the outside), the edge of the pattern is visible and not lost to stitching.

An hours work for me. It was a start.

Once I’d sewn all the way around (and it took me a week of nights to do this), I was then able to cut around the curve, along the outer edge of the purple border, and outside the pins.

Sewing done (for the most part), and the excess is cut away.

I could now turn the cape out for the first time to see the results of my handy work.

The initial turn out.

So you can see that sewing as I did, once the cape is turned out, the line of the pattern is just where I wanted it to be.

With the curved side of the cape done, the straight edge needed doing. This was different because I didn’t want to sew it. Along this edge I’d left a good few centimetres of excess. If I folded that over and sewed it, like a hem, I’d end up with stitching all along the straight edge, right through the pattern and that would be ugly.

The end result. This is with the hems folded in.

So I bought some iron-on adhesive tape.

And then proceeded to fold, and then iron down the hems of both the outer fabric (from the wallhanging) and the inner fabric. This gave a really nice finish.

In most respects, the fabric cape was now mostly complete; mostly…

I needed to create some wrist bands and sew them to each wingtip of the cape. For this I took a 5 centimetre wide strip of the leftover backing fabric, placed some of the adhesive tape down its centre and then ironed each side over the edge, providing a nice purple wristband.

A white fabric test wristband.

I also bought some small velcro dots for help with closing up the opening when the time comes.

Velcro dots for use in closing the cape straight edge.

Time to add some life to this thing!

Step 3 – Electronics

Now that I had the fabric element sorted, I needed to give some focus to the electronics.

I wanted to embed inside the cape a lot of LEDs, and I wanted to animate them in a way that would roughly approximate the animation seen in the original cape.

Here, I’ve slowed down the cape charging animation as a reminder:

Slowed down look at cape charging.

So searching online, I found that I could get rolls of LEDs that are programmable, allowing me to set the colour of each individual LED on the roll. Each roll was 5 metres long. I ended up settling on measurements that allowed for 20 strips of LEDs containing 20 LEDs each.

These rolls contained WS2812B LEDs that are programmable, providing a full RGB range of colour. These were perfect. Now how to control them? Well there are a myriad of tutorials online on how to do that. A couple that I referenced are:

  • https://core-electronics.com.au/tutorials/ws2812-addressable-leds-raspberry-pi-quickstart-guide/
  • https://randomnerdtutorials.com/guide-for-ws2812b-addressable-rgb-led-strip-with-arduino/?unapproved=416030&moderation-hash=fe7fe5bb1bdbb389f626fca1917d9912#comment-416030

These were great because I had an old RaspberryPi lying around so it allowed me to prototype and play with the animation sequence; to test whether I could make it do what I wanted. This was all done with a small LED board from my local electronics retailer.

Here is the resulting animation on that LED board.

Cape Animation Test Rig

Note that it differs in one key way from the in-game animation. In the game, charging leaves a glow remaining in the cape, and I couldn’t do that simply because doing so meant leaving all of those LEDs on a lot longer. These smart LEDs are power hungry, and if the wearer didn’t want to carry around a massive battery on them, I had to make this compromise.

With the animation worked out, I now needed to work out how I could translate this little circle into a cape. I also needed to find a solution to control the animation other than using a RaspberriPi which is too big, and also, too power hungry.

And I discovered that the Arduino family has just what I needed. The Gemma M0! This tutorial showed me a lot of what I needed to know:

https://learn.adafruit.com/gemma-color-touch-pendant-necklace/introduction

The Gemma M0 is a terrific little board, with a CPU and all of the connectors I needed. I needed a single data line to drive the LEDs, and another to act as the button sensor.

The original rough wiring diagram I came up with was like this:

Placing all of the LEDs in series.

But the problem with this was that with 20 LED’s per strip, and 19 strips, that is 380 LEDs, and there is a limit of how many LEDs we can have in a single strip.

Part of this is memory, but part of it is the CPU speed. Because I was using a relatively low spec chip, there was no way I could animate all 380 LEDs independently without having issues with performance.

So I chose a different path; the data line that drives each of the 19 strips would be run in parallel in the same way the power does. This meant that the CPU only has to manage 20 LEDs in total. It also meant that each strip would be animated in sync with the rest.

Placing each strip in parallel.

To do this, in between each LED strip inside the cape I needed to run wires joining each strip in parallel. I needed this to be flexible but secure. What I settled on was creating a tiny little circuit board by cutting them out from a larger “Vero” board. Each little board would have 3 lines, one for each of 5V+, Ground, and Data. Here is a rough diagram of what I needed to do:

Cape wiring.

This was laborious but necessary. I cut out each piece of veroboard (or stripboard), filed the corners so that they were rounded and smooth, and the proceeded to solder them all together with small lengths of ribbon cable.

I then used more lengths of ribbon cable to connect each board to an LED strip (🚨important, connected to the INPUT end of the strip).

After putting this all together, it was time to lay it all out on the backing fabric on the inside of the cape.

Everything laid out for a test in the light.

Looking good. What about in the dark?

And in the dark.

So whilst this is looking great, and shows that all my efforts at wiring and programming is working, there is a problem with the LEDs.

I don’t have a clip of it still sadly, but what I noticed was that the LEDs showed through the cape material very clearly as little dots. So I needed something to diffuse their light that would be inserted into the cape over the top of the LEDs without making the entire cape over bulky.

Testing a piece of material at the store I found this worked. You can see most of the lights are diffused, but a few are not, showing the difference:

Diffusing the LEDs as a test.

The material I settled on was this stuff:

White flex foam as a diffuser.

So to demonstrate this in a raw manner:

Cape electronics laid out and tested with diffuser.

And using a piece of this as a test on a single strip of LEDs inside the cape produced this:

Testing a single LED strip with defuser material.

And to take that a step further, in this clip you can see the difference between diffused and natural.

Showing the difference between natural and diffused LEDs.

This diffuser was flexible, but it was also quite stiff. Having the entire cape lined with it was going to change the way it hung on the wearer. So what I did was cut long strips of the material, roughly 2 to 3 centimetres wide. I would then sew them down over the top of each LED strip within the cape.

One thing I’ve not really talked about (what really? You’ve gone on, and on, and on…) is how to power this thing. There are two parts to the electronics; the Gemma M0, and the LEDs.

The Gemma M0 needs a 3.2V to 5V power source, and the LEDs need a 5V power source. Now the Gemma M0 can run for ages on very little but those 380 LEDs need lots of power.

I elected to use two power supplies. For the Gemma M0, I bought a small 2AA battery holder, and for the LEDs I settled on a battery pack that you might use to charge your iPhone. One trick with doing this is that because the Gemma M0 and LEDs are still electrically connected, the respective GND from each power supply need to be connected.

So how is the entire wiring done? Well here is another of my terrible diagrams to answer that:

The final wiring diagram

Step 4 – Final construction

With everything now worked out, it was time to put it all together. This was pretty straightforward, and involved the following:

  1. I purchased a “wearable” push button that I then attached at one extreme end of the cape, where the hand would be that moves the cape. This button was then attached via two wires to the Gemma M0 to act as a trigger for the charge animation.
  2. Stick each of the LED strips onto the inside of the backing fabric. The LED strips I’d bought had adhesive backing so this was pretty easy.
  3. Each of the little circuit boards I made joining the strips together needed to be insulated so I covered them with insulation tape. This also helps to secure the wires and reduce the risk of them breaking as the cape is worn.
  4. Each insulated circuit board was then adhered to the backing fabric to further reduce wear and tear. I probably should have used a softer, more flexible wire. I went with ribbon cable because it’s cheap and I had some.
  5. I then sewed a strip of the diffusing fabric over each LED strip. This was done pretty roughly; it just needs to be secure enough to stay in place.
  6. The Gemma M0 needed to be sewn into place so that it’s not floating around.
  7. The pushbutton was sewn into place near the tip of one edge of the cape and the wires between it and the Gemma M0 secured.
  8. A small “button hole” was cut and sewn near the nape of the neck so that power leads from the cape could be fed through. These power leads could then run down the back of the wearer to belt mounted battery packs.
  9. The two wristbands I’d created were then sewn into place.
  10. The small velcro dots were stuck into place along the inside straight edge of the cape so that the opening could easily be closed, whilst leaving me room to open it all up again in case there is ever a problem.

The End Result

Sadly, COVID got in the way just as I was finishing the cape, and as we planned to go to our first ‘Con’. We had to rush a mask together, and we managed to attend SuperNova Melbourne 2020 before everything changed.

Our plan was to add more to the cape, to add animations to the diamonds down the back, and to add a glowing chest light as well, but life changed, and focus shifted.

The final cape can be seen in the following video, at home as a test, and then very briefly at the ‘Con’ (we were a little uncomfortable videoing amongst other people).

Parts List

  • 3 x 5 Metre rolls of WS2812B LEDs
  • 1 x Gemma M0
  • 2 Metres of ribbon cable (5 colours)
  • 1 x Wearable Momentary push button
  • 1 x 2AA Battery holder
  • 2 x AA Batteries
  • 1 x USB Battery charge pack (10,000Mha minimum)
  • 1 x Cape wall hanging
  • 1 x Sheet of backing fabric (I used purple in keeping with the front).
  • 1 x Roll of Iron on adhesive.
  • 1 x Packet of velcro dots.
  • 1 x Packet of pins (you will need lots and lots)
  • 1 x Sharp fabric scissors
  • 1 x Fine sewing needle
  • 1 x Reel of strong sewing thread, the same colour as your backing fabric
  • A large sheet of diffusing fabric (enough to cover 19 LED strips, each say 5 centimetres wide each x roughly 70 centimetres).

Top | Plan Design | Making the Cape | Electronics | Final Construction | End Result | Parts List

World of Hex, an app 20+ years in the making.

pkclsoft May 16, 2017 Announcements, App Updates, Coding, Games, Opinion, Programming, sample code

Back in the 1980’s, when I used to spend way too much time playing games on my Apple IIGS (and earlier, my Apple IIe), one of my favourite games was Fortress, by SSI.

Fortress gave me a small game board where I would fight it out against one of several computer AI’s, where a game consisted of 21 turns, and whoever controlled most of the game board at the end was the winner.

One of the things I loved about Fortress was the way the AI’s got smarter with time.  When you first started playing, it was easy to win, but after a few games, it became more challenging.  This kept me coming back to Fortress as I felt I was playing against something that basically learnt as I did.

As a programmer/developer, my mind is rarely idle, and I always have a project on the go.  In the 1994 I thought it would be neat to rewrite Fortress for the Apple IIGS, using higher resolution graphics.

I started doing this with the ORCA/Modula-2, which I had recently brought to the Apple IIGS with publishing help from The Byte Works and some connections at Apple.

As part of writing this blog post, I’ve run up my Apple IIGS environment (yes, I still have all of it) within the wonderful Sweet16 emulator and found that code:

I hadn’t realised just how much of the game I had written.  I thought I’d only written a bit of the game logic, however it turns out I’d written a lot of the UI as well, as can be seen from when I ran it.  The AI’s hadn’t been written but the basic building blocks were there.

The funny thing is, I have the code; I have a compiled binary that I can run, but I can’t remember how to re-compile the source code anymore.  I’ve got a build script there, but my memory fails to help me out.

One of these days I should bring all that code out, and store it somewhere safer.

Around this time, I got distracted and much of my home based projects took a back seat, Fortress included.  My work took me away from Apple development entirely for around 15 years.

So Fortress GS was left on a floppy disk (or two) in a box of backup floppies along with everything else.

Then, in 2012, after I’d been back developing for Apple hardware again for a few years I got the bug again, and, having recovered my entire Apple IIGS development environment from hundreds of floppies and some second hand SCSI drives (my how they’ve grown; did you notice the size of the “M2” hard drive above?), I was able revisit Fortress GS.

I ported the guts of the code to Objective-C and wrote a basic prototype to show to another developer at the time as a proof of concept.  This one was really basic, but it allowed me to place moves for both sides by tapping the screen.

I showed this to a designer I knew at the time who thought the idea was great, but suggested that it would be more interesting with a hexagonal grid rather than the rectangular one.

I toyed with the idea at the time, but I did nothing with it; I had other projects happening, and I wanted to focus on my educational apps.

Moving up to 2016, and the release of the Apple TV, I launched my latest educational app, Tap Tangram (which I later launched as Classroom Math Drills), and due in part to my failure to recognise that I’d missed my target, and the complete lack of featuring by Apple, the app never gained any traction and failed at launch.

That left me wondering what to do next, and then it occurred to me to reboot the Fortress app idea once again.  I’d also recently read a most-excellent blog article by @redblobgames about manipulating hex grids in software, so my mind was abuzz with what I could do with it.

Enter World of Hex, my latest, and final attempt to reimagine the classic Fortress for iOS and the Apple TV.

I started out just playing with the hexagonal grids code that I wrote as a port of the code provided by @redblobgames and getting the basic board working with the underlying move computations.

Once I’d done that, I sat down and brainstormed how I wanted the app to work; how the game would play and during this process, I asked myself:

“What if, rather than a simple rectangular grid of cells, we had a map of the world as a map of hexes?”

And then I got going.

“What if, the terrain was somehow represented in this 2D map of hexes.  Rather than try to represent the 3rd dimension as a true 3rd dimension, colour the hexes to represent the terrain.”

and

“Hmm.  how many cells?”

“Earths land surface area: 150,000,000 km2”

“If we say each hex has a real world “size” of 1km, then we need to be able to map out 150 million hexes eventually.  Even if they aren’t all being used by players, we need a way to know where on the earth a hex maps to land.”

“So, what is probably easier, is to map the entire planet with hexes, and then mark some as usable land, and others as ocean, unusable land, etc.  that means a lot more hexes in the database though.  It means millions of hexes to cover the planet completely.  too many.”

“Will performance be an issue?  yes.”

And so it went; with performance an issue and no real idea at that point of how to make it all happen I went hunting for others that had build a world of hexes.  I needed to get an idea of:

  1. Could I get the basic mechanism to work on an iPhone
  2. How many hex tiles would I need to build a reasonable approximation of the Earths land areas?
  3. How would it perform if I built a model with all those tiles?

After some searching with Google, I happened upon the wonderful Hexasphere.js by Rob Scanlon.  This gave me hope.  If this could be done in a browser, then I could do it.

So I set about to port his Hexasphere javascript code to Objective-C to see what I could achieve.

This is where I started to hit upon the boundaries of my knowledge of 3D modelling and SceneKit.  I also found myself struggling with some of the math concepts involved, having to trust in these people that obviously handle it better than I.

I did get Hexasphere working, though it was extremely slow because every hexagonal tile was being implemented as a separate SceneKit node.  It did work, but it just wasn’t going to cut it for a production quality game.  At this point I was using very large hexagonal tiles, so the tie count was still quite low.  Once I increased the resolution of the model, there would be a lot more.

I ended up posting a question or two on the Apple developer forums and the Games Stack Exchange.  These helped me better understand how to improve the performance of my 3D model however I was still hitting problems in that the on-screen representation of the Hexasphere was not high enough quality.

I spent several weeks working on it and getting some great help from colleagues who knew math, and 3D rendering far better than I.  The end result of that was a perfectly rendered Hexasphere using only 4 SceneKit nodes that rendered at a full 60fps on devices as old as the iPad2.  The change was to put all of those tiles into a single model, and to colour them individually via the shader and it’s inputs.

I finally had what I needed to get on with the game.

At this point it was just a matter of bringing all of the pieces of the puzzle together and making them work well.

For this game, the main pieces were:

  • The hexasphere code
  • The Hex Grid code
  • SceneKit and SpriteKit
  • CloudKit (iCloud based database)

I’ve already spent enough time on the hexasphere and hex grid, so I’ll try to restrict the rest of this post to the hurdles I had finishing off the app and bringing it all together.

SceneKit and SpriteKit

Apple’s engineers have done a wonderful job of these two API’s.  Having developed most of my apps with Cocos2D, the transition to SpriteKit and SceneKit was pretty painless.  The primary difference for me was the coordinate system.

The main reasons I went with Apple’s frameworks this time were:

  1. I wanted to be able to render the 3D world, which Cocos2D wouldn’t do.
  2. I also wanted to branch out and learn something new.

That said, the trick was that I needed to be able to overlay my 2D game components on top of the 3D components.  After a little research I discovered that Apple had kindly given us an “easy” way to do this via the overlaySKScene property of the SCNView class.

This works remarkably well however it does introduce some problems because there are bugs in the Apple frameworks (at least, there are at the time I write this).  I found that there are some things, like animations of the SpriteKit nodes that need to be forced to be done within the SceneKit renderer thread.  It seems that Apple use a multi-threaded renderer for SceneKit/SpriteKit and some operations that you’d expect to be thread safe, aren’t.

With a lot of help from Apple Developer Technical Support, I found and fixed this problem and filed a bug report #32015449 (github project) accordingly.

Another issue related directly to the use of overlaySKSCene was an incompatibility with the tvOS focus engine (it basically doesn’t work).  I ended up having to port a focus engine I’d written for Cocos2D on tvOS and enhance it to work with World of Hex.  I’ve also filed a bug report for this issue: #30628989 (github project).

Apart from this, SceneKit and SpriteKit work a treat and have made my life so much easier.

CloudKit and iCloud Integration

Once I’d decided to expand the original game beyond a single game board, and to allow people to play games in a world of game boards I needed a way to store the game boards in the cloud so that everyone sees the same thing.

When I started to develop this idea my family and I were enjoying Pokemon GO for the novelty it provided.  As a user, one of the things I really didn’t like about Pokemon GO was the way it forced users to either associate our existing Google account with the app, or to create a brand new Google account just for the game.  There were other options, but they all involved forcing the user to log into a specific account, just for the game.

So I looked at Apple’s CloudKit which is just one part of the whole iCloud service layer that Apple has been building and developing for years now.  One of the beauties of CloudKit is that for every person using an iPhone or iPad that is logged into iCloud, an app integrating CloudKit will just work because there’s no explicit login required.

This is what I wanted.  On the whole, the CloudKit integration was very straight forward and it does just work.

I really enjoyed the ease with which Apple have allowed us to define our database structure via the CloudKit dashboard, make changes and even migrate those changes from development to production environments painlessly.

If there is one thing that I found lacking it is that in the dashboard, there is no way to simply remove all existing data without also wiping the database model itself.

Conclusion

World of Hex has grown far beyond what I originally set out to write.  It’s nothing like my original attempt back in 1994 on the Apple IIGS, and even my really early brainstorming of last year differs somewhat from what I’ve built.

One of the reasons I build these apps is for the challenge and to keep my active mind busy.  I certainly don’t make much of an income from them (though, mind you, I wouldn’t complain), so there’s a lot of satisfaction in having an idea realised and released into the world.  Yes it can be crushing when it doesn’t take off, but, as I mention in the credits scene within World of Hex (can you find it?), “Never Give Up”.

Learning some of the quirks of Apple’s frameworks has certainly been a challenge.  Cocos2D has been wonderful to work with over the years, and in some ways it’s more mature and easier to work with than SpriteKit, however SpriteKit’s deep integration is hard to pass up now that I’ve learnt it.

SceneKit offers some pretty amazing functionality from my point of view.  I remember, as a teenager back in the early 80’s having a book with some algorithms for 3D line art animation that blew me away at the time.  Being able to draw a model in your fave modelling tool, drop it into Xcode and have it on a device screen in minutes is insanely great.  For developers out there that think its tough work creating an app, you have no idea how spoilt you are.

If you’ve read through all this, then thanks for staying till the end.  It grew somewhat longer than I’d planned.

Here it is, my World of Hex.  I hope you take the time to have a game, and that you enjoy it.

World of Hex is now available in the App Store. 

Download on the App Store

World of Hex launching on the 11th of May 2017

admin May 2, 2017 Announcements, App Updates, Games

After a lot of work, my new app, World of Hex is almost ready to launch.  I’ve set the date as the 18th of May 2017.

You can find a basic press kit here: http://www.pkclsoft.com/wp/world-of-hex-press-kit/, and the app page here: http://www.pkclsoft.com/wp/app/world-of-hex/.

I’ll update a little more as the day gets closer!

-2133Days
-11Hours
-18Minutes
-39Seconds

An interview about Hiring an App Developer

admin January 10, 2013 Advice, Announcements, App Updates, Games

I short while ago, the kind people at GoPayment.com asked me if I’d like to be interviewed about hiring an app developer.  The end result of that has been posted today, and can be read here.

Yesterday, both of my Math apps received a minor update in the App Store.  The changes were really very minor, but a part of my desire to maintain and support those people that have bought the apps.  If you are one of those people and have some feedback, please let me know if there’s something you’d like to see added or improved.

Another piece of news is that my new app, Claustrophobic has been submitted to Apple and is awaiting review.  I’l really quite excited about this app; it’s a real step up for PKCLsoft, and I’m hoping that people are going to love it.

A lot of thought has been put into the game concept, the sounds, the visuals.  There’s still a lot more I want to do with the game, and I have a plan of added features, new game twists, etc.

Whilst it’s not available yet in the store, you can see some video of the game by visiting my YouTube channel at: http://www.youtube.com/user/pkclsoft

Ove the next week or so, I’ll be posting more game play videos to give people a feel for the game.  Once it’s available, players will have the ability to share their games via the built-in Kamcord feature.  I’m really looking forward to seeing how people play, what strategies they use, etc.

Watch this space!

 

Claustrophobic

admin December 31, 2012 Games

Claustrophobic, a new game for the Apple family of iDevices running iOS 5 or later, is almost ready to release.

In this game, the aim is to keep your ball rolling as long as you can.  When it’s moving above a minimum speed, your score increases.  If you stop or slow down, so does the score.

As time moves forwards, the space you have on the screen in which to move reduces, as the boundaries move inwards.

As you roll around the screen, controlling the direction of the ball by tilting your device, various obstacles, tokens and power-up’s appear on screen.  It’s up to you to dodge or hit them to keep the game going.  Some will give you points, some will end the game, some will affect how your ball moves.

This game has been built from the ground up to work on all of the new Apple devices, especially the iPad Retina, iPad Mini and iPhone 5.

A teaser/trailer video has been posted on Youtube to give you a feel for the game ahead of it’s release.

If you want to know more about the game, write a comment here, or email me via the support email address on this site.

 

 

You can add widget to "blog" widget area by going to Appearance > Widget

Copyright © 2012 pkclsoft.com. All Rights Reserved