bits.toPixels()

Ok, so you've almost finished your game and want to take it for a spin by distributing a beta version. Let's assume that you're quite satisified with the design and functionality, and you have also somehow managed to get a solid amount of testers interested in your game. That's aweseome, but a few big questions still remain unanswered: When are you planning to collect feedback from your testers? How are you going to collect it? What kind of feedback and statistics do you want to collect? These are not easy questions to answer, but if you want to get the most out of your beta testers you need to think about them. Hard. I don't have the knowledge or experience to say what works best, what you should/must do, etcetera. But I did think about this a lot while planning the beta testing for my iOS game Ice Trap recently, and I'll try to explain what I did and why. Let's get started. When to collect feedback When I discuss the issue of when to...

Do you have a large amount of PNG images and need to reduce the file sizes? Try pngquant , it's great! Especially for mobile apps and games it's really important to keep the final download size down. This because you can't rely on people around the globe having access to high-speed Internet connections and unlimited amounts of free mobile data. In it's simplest form you can just run the following command to compress all the PNG images in the current working directory: $ pngquant 256 *.png One "problem" with this command is that it creates new image files instead of overwriting the existing ones. This might be nice sometimes, but is usually not what you want. To overwrite your files, just add the --ext and --force options like this: $ pngquant --ext .png --force 256 *.png Ok, that's nice, but what if you have your images structured in a directory tree? Going into each directory to run pngquant can quickly become a tiring task if you have...

As a game developer you often want to show off parts of your work, for example on Twitter or Facebook. Sometimes plain images are enough, but other times you might have a cool game sequence that requires animation to come alive and get the proper attention. You could record video clips and share them with your followers on YouTube etcetera, but most of the times you're probably better off by just creating an animated GIF instead. Creating animated GIFs is of course nothing new, and not only useful to game devs. From my experience it's an excellent way to quickly demonstrate new features and ideas no matter what you're developing, without the need to have a working prototype. It took me a while to find my favorite tools that allow me to create GIFs of decent quality quickly and without hassle. Which tool to use depends on what you need to do. Basically, there are two different scenarios where animated GIFs come in handy. 1. Record an actual video sequence (e.g. gamepla...

I have this app built with React Native v0.44. The current version is 0.48 but I haven't had time to upgrade during the summer, and when I tried to do so I got all kinds of weird dependency errors so I decided to stick with 0.44 for a little while longer. Yesterday I bought myself a new Macbook to finally put my old choking Macbook Air from 2012 out of its misery. I cloned my git repo, ran npm install, but when I tried to launch the app in the iOS simulator it stopped with the following error: Unable to resolve module ReactComponentTreeHook from node_modules/react-native/Libraries/Performance/Systrace.js I tried to clean up and reinstall a couple of times since that usually solves quite of lot of dependency errors, but this error persisted and I had no clue what was causing it. After searching the Internet for a little while I found this page presenting a couple of possible solutions worth trying . The first solution suggests using react-native-git-upgrade, and that's t...

The latest addition to my transition2 library for Corona is the convenience function fallingLeaf() . I was working on my iOS game  Ice Trap , trying to create a "confetti cannon" effect when the player completes a level and achieves three stars. While playing around with the existing transition functions I managed to reach a quite decent result by combining several different transitions. It took me a while to get there, so I realized that it would probably be nice to turn that combination of transitions into its own convencience function. At its simplest use, you only need a few lines of code to create a leaf that falls smoothly towards the bottom of the screen following a seemingly random pattern: local transition2 = require ( "transition2" ) local leaf = display.newImageRect( "leaf-64px.png" , 64 , 64 ) leaf.x, leaf.y = display.contentCenterX, 0 transition2.fallingLeaf(leaf, {}) Simplest possible use of fallingLeaf() Ok, so that l...

I just added another transition function called zRotate() to my transition2 library for Corona. You guessed it, it rotates a display object in the z dimension around either the x or y axis. It requires the display object to have a path with four nodes (x1, y1) to (x4, y4), like images and rects do. If you want to know more about what transition2 is, you can read this blog post . A simple vertical rotation could look like this: transition.zRotate(coronaLogo, { degrees = 360 , time = 3000 , iterations = 0 , transition = easing.inOutSine, reverse = true , }) A little more complex example of a horizontal rotation with a color effect at the end of each iteration. Note that this example utilizes two new params: iterationDelay and onIterationComplete (which is not the same as onRepeat). transition.zRotate(coronaLogo, { degrees = - 1440 , time = 4000 , iterations = 0 , transition = easing.inOutQuad, perspective = 0.75 , ...

Corona Labs has a great transition library that makes it very easy to perform some useful and common transitions on display objects, such as moving, scaling and rotating them. There are also plenty of different easing algorithms to choose from that affect the behavior of the transition effects. I've used this library a lot and I really like its ease of use. But there are certain things that you can't do with the transition library. One of them is to modify the fill and stroke colors of a display object to be able to fade smoothly from one color into another. UPDATE June 30, 2017: transition2 is now a full standalone rewrite of Corona's transition library. Not just an extension that wraps the transition library like the remaining text in this post suggests. I needed a color transition effect for  Ice Trap  to make some glowing image borders but had a hard time finding any solution that I felt comfortable in using, so I started rolling my own. To make a long story s...

Not very long ago you had to upload your App Store screenshots in many different resolutions for all the different iOS devices. A real pain. Fortunately, Apple realized this and simplified the screenshot upload process a lot. Now you only need to upload screenshots for the 5.5" iPhone and 12.9" iPad displays, and automatic scaling will be done for remaining devices with lower resolutions. It's recommended to grab your screenshots from a physical device, but what do you do if you don't have a 5.5" iPhone? Well, instead of buying a new device or scaling lower resolution graphics you can use the Corona Simulator to get the high resolution screenshots you're looking for. This is how I do it for my Corona SDK apps on my Windows machine, and my example assumes that your screenshots are taken in portrait mode and that your app is primarily designed for iPhone rather than iPad. You must of course also have a monitor that can handle the resolution of the screensho...

Creating an App Store gameplay preview video for your new, cool iOS game might feel like a daunting task at first. But actually it isn't that difficult once you get started thanks to a couple of free, and really powerful tools, provided by Apple. I'm a beginner myself at making videos, but following the workflow described below I managed to put together a gameplay video in just a few hours that I'm quite satisfied with. Let's get started. What you  need : iOS device Mac with OS X QuickTime Player (free) iMovie (free) The workflow: Write a short script. Just a very brief overview of the intended video, divided into a few main sections and how long to spend in each section. Keep it short, remember the 30s limit. Try to focus on what's unique for your game. After watching the trailer, a player who has never seen the game before should hopefully have at least a decent understanding of what the game is all about. Also, try to avoid explanatory texts if poss...

Developing a React Native app for both iOS and Android at the same time comes with some challenges. One of them is how to best organize your source code in a version control system such as Git. Even though most of the code will run on both platforms, there will also be quite a lot of things that need to be addressed differently for each platform. A good approach for handling these differences is to implement a suitable Git branching strategy. Being a solo developer I have the luxury to decide exactly how I want it to fit my needs, so I started out by writing down the following "requirements": I want to have all my code in a single Git repository I need separate branches for the iOS and Android versions I want to be able to develop all features shared by iOS and Android in a single branch to make everyday development as smooth as possible I want merging to be painless I want to avoid cherry-picking commits between branches I want separate branches for development and...

In the React Native documentation it's possible to read about how to create a signed APK for release . But what if you only want to create an unsigned debug APK that doesn't require a developement server to run on device? Couldn't find anything in the official docs about this, but as usual Stack Overflow provided some great information, through  this thread with the following simple and efficient solution: First, from your app's root dir, run the following command: react-native bundle --dev false --platform android --entry-file index.android.js --bundle-output ./android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest ./android/app/build/intermediates/res/merged/debug When I ran it the first time I got some strange error, something about not being able to open a .babel.json file. Ran the command again, and no problem the second time. Then the second and final step: cd android ./gradlew assembleDebug After this you should be able...

Reloading a React Native app in the Android emulator is as easy as just double tapping the R key on the keyboard. But to do reload on device you need to bring up the developer menu to find the 'Reload' option. Shouldn't be that hard, right? You're just supposed to shake the device, or press the hardware menu button on older devices. Well, my old ASUS device doesn't react to any shakes, and neither does it have a hardware menu button. So how do I open the menu? Couldn't find any information in the current React Native docs about it, but finally found a solution in this documentation for React Native v0.27 ! Don't know if things have changed between v0.27 and v0.43 to render the information obsolete, but at least it did the trick for me. Just type the following command from a command line: adb shell input keyevent 82 It's also possible to exchange 82 for KEYCODE_MENU if you feel like typing a few more characters. :-) adb shell input keyevent KEYCOD...

A couple of days back I got this weird error in the Android version of my React Native app that never happens on iOS. The error seemed to be completely random and appeared every once in a while when I tapped an item in a list to view its details. Every time it happened, the app crashed with the following cryptic error message: undefined is not an object (evaluating '_props[registrationName]') Nothing in the stacktrace that caught my eye, and an error that seemingly had no direct connection to my own code. Scanned the Internet and especially Stack Overflow for clues but couldn't find anything related. Today, a few days after the bug first appeared, I decided to try to hammer it out once again. Launched the Android emulator and sure, the bug was still there and just like before it seemed to happen randomly. Ran a desperate Google search for the error message, and this time it resulted in this interesting hit at the top:  http://stackoverflow.com/questions/43674781/und...

I'm working on the Android version of a React Native (v0.43.4) app on my Windows 10 machine, which has turned out to be a real pain compared to working on the iOS version on my Mac. I've got everything set up with Android Studio, platform tools, the Android emulator and so on. Running my app in the emulator also works, but almost every single time I issue the react-native run-android command, it fails with the following error from the React Packager: EPERM: operation not permitted, lstat <some_path_here> I have no idea what this problem is or why it happens. I don't even have to make any changes to the code or included libraries for it to appear. It's enough to just stop the React Packager and run react-native run-android again to get the error. It's really starting to get on my nerves since rebuilding seems to be required a lot more often on Windows than what I'm used to on OS X. I'd love to know what causes this, but until I manage to figure...

React Native together with Redux is a great combination of technologies for building a cross-platform mobile application. If you haven't worked with React, Redux (or similar frameworks) there will definitely be a steep learning curve to understand the key concepts and how everything works. But once you get the hang of it, you'll find yourself creating new components in no time, with code that feels very stable and maintainable. The fact that React Native and Redux are completely independent of each other gives you a lot of flexibility when it comes to how to use them in your app. This is of course mostly a very good thing, but it can also be a bit confusing at times. One of the things that took me quite some time to figure out was how to best construct my components, when I should use Redux container components, what should be injected from the container components to the presentational components and so on. If you don't decide how to solve things like these early on in...