'Hybrid' apps are made using web languages like Javascript/HTML/CSS and then turned into a mobile app using something like Cordova.

I work as a web developer, but really enjoy making games as a hobby. This is the third game I've released to the App Store and Google Play. Usually, you can't do anything too crazy with hybrid apps, but simple games can be fun too :)

This game is called "Circle Status" and I developed it with my husband (also a software dev). The game takes place in a 2-dimensional world, inspired by Edwin Abbott's Flatland universe, where social status is determined by the number of your angles. You start off as a 'lowly' triangle and the goal is to make it all the way to a circle. I wrote up a blog on our process if anyone's interested.

The game can be downloaded here:

Android

Apple

And of course, here's my proof (same person blog pic).

Happy to answer any questions anyone has about web dev or hybrid game dev.

Comments: 75 • Responses: 25  • Date: 

myfvckeduplife41 karma

Where would you suggest starting to acquire skills on coding?

Edit: Also, cheers! I'm a female going in to tech, so you're very inspiring to me.

Big_Black_Cat43 karma

For me it was finding a project I really wanted to work on and sort of following the rabbit hole to figure out how to make it.

If you're starting out completely new and are interested in web dev, the path I took was HTML > CSS > JavaScript (just the logic side)> Javascript (with the DOM) > jQuery > PHP/Node > Angular/React.

It probably took me a year from when I first started learning to landing my first job. And I really recommend having a good grasp of each of those steps before moving on to the next. Youtube has a bunch of tutorials and they're all pretty great for learning the basics. Anything more specific you can find by looking at the docs or Stackoverflow.

It's a really fun journey and it always feels more daunting than it actually is until you have something working on the screen.

ZronaldoFwupNotGood15 karma

How long did the project take you to complete start to finish?

Big_Black_Cat12 karma

I have a full-time job, so I was only able to work on this sporadically over the span of a year and a bit. Maybe like a few weeks at a time every few months. Sorry if that's not specific enough.

rdusr10 karma

Kudos for getting 3 apps done as a hobby! Based on your company name, does one of you have a serious food allergy?

Big_Black_Cat5 karma

Thanks! And yes. My husband is severely allergic to peanuts and tree nuts. I tease him about it sometimes (in a loving way).

Isogash8 karma

What is this AMA meant to offer? Hybrid apps have been around for over 10 years and this isn't a sub for hybrid app developers. Isn't this just an excuse to promote your game whilst pretending to be doing something new or special?

EDIT: Found this tutorial on how to make a Cordova game using Phaser, which is the same stack you've used.

Big_Black_Cat0 karma

I definitely don't think I'm doing anything new or special. And I'm not using this as an excuse to promote my app. I am promoting my app. Simple as that. Not trying to be deceitful about that. But I'm also offering to answer questions and this is definitely a topic I love to talk about. I guess I don't see the issue in that. This AMA is definitely offering something to some people - I don't think AMAs are meant to target every single person.

Isogash1 karma

I'm not sure I would personally class this as acceptable under the /r/IAmA guidelines though, and I think you are misleading people here into believing that hybrid apps are unique or special and that you are some kind of authority or expert on them in order to promote your game.

This rubs me the wrong way for two reasons:

  1. The reality is that hybrid apps were the default thing for a while, and we have since moved on to native (or cross-platform game engines). I actually wrote hybrid apps myself nearly 5 years ago. I definitely saw it being used to make games back then too.
  2. There are hundreds of thousands of budding mobile and indie game developers out there who are just as qualified to answer questions about the technologies they worked with. I don't think it's fair to them that you should be allowed to promote your game here whilst misrepresenting your expertise or uniqueness in the field when they promote legitimately.

Big_Black_Cat1 karma

Sorry, I'm still not sure what point you're trying to make :/ Are you saying because there are other qualified people to talk about this that I shouldn't be talking about this? Is anyone 'allowed' to talk about this then? I'm not sure how I'm misrepresenting my expertise. Everything I stated was factual. I never said I was an expert in anything.

And for the first point you made, I think there's still a place for hybrid apps in the market. I don't think people should look at them as outdated technology just because they've been available for a while. The technology that supports them has come a long way and continues to be supported. Just because something has been around for a while doesn't mean that people wouldn't want to hear about it either. I really enjoy AMAs from game devs whether they're using Unity or making HTML5 games (both of which have been around for a very long time).

Isogash0 karma

This is /r/IAmA, I'm not saying you shouldn't talk about this, but I don't think it qualifies as being unique enough to be an AMA here, this sub is specifically for people who lead very uncommon lives or have some otherwise unique experience.

I think you are misrepresenting 'hybrid' apps as being something you are uniquely talented in or are otherwise very uncommon to the layman in order to be allowed to promote your game, since that is the premise of this sub. If you agree that they aren't uncommon or unique, then you shouldn't be holding an AMA here.

Big_Black_Cat1 karma

Okay, I see the point you're making now. I guess it's just a difference of opinion then what classifies as unique enough to make it on this subreddit.

I don't think it's unique in the sense that thousands or millions of people have probably done this. But I do think it's unique enough for this subreddit because the majority of people (even those in the industry) probably haven't done this.

I know a lot of devs and I can't think of a single person that makes games on the side and has released any as a hybrid app. A lot of the people I work with are curious about the games I make, so I figured some people on reddit would be as well.

landertall7 karma

What are you trying to do with your career?

I'm also self taught but now I code in any stack or language. I've worked in different industries, most recently AR. I decided after a couple years to get a CS degree and it was soooooo much easier learning higher level concepts when you already have a foundation of working through difficult problems. Most people can't code because they simply don't want to spend the time figuring out why something isn't working. If you love it, I'd suggest getting a degree but you don't need it.

Do you want to make games for a living?

You can make more complicated games in unity or unreal.

Do you want to ensure you still have a job in 5 years?

Start learning more about the underlying principles of languages and it'll make switching to something like typescript a lot easier and will ensure you always have a job

Big_Black_Cat11 karma

  1. I think my career goal is to do my own thing, hopefully that being making games.
  2. I have definitely considered going back to school to do a CS degree. Not because I think it would help that much in my career at this point, but because I'm genuinely interested in CS.
  3. I would love to make games for a living. But I don't think I would want to work as a game dev for someone else or a big company. I've heard it's a very stressful job.
  4. Planning on trying out Unity for the next game I work on!
  5. Haha yes :) I'm constantly learning new things at work. This profession requires it. Already work with Typescript/Angular in my current job.

New-Vlad6 karma

What was your first project that you claimed you started learning web dev from?

Big_Black_Cat4 karma

It was a hidden object game where there are a bunch of circles moving on the screen and you need to find the only circle that isn't moving. I made it using Pixi.js, a Javascript game library. Also ended up turning it into an app. It was a pretty simple game, but took me about a year to do. Probably helped me land my first job.

dcux5 karma

Couple of quick critiques ... Do I always have to start from zero in the game? I sort of hate that. Also, not being able to consume the players below you (triangle when you're square, for example) seems counterintuitive. Don't the upper classes exploit those below them? 😁

Also, the difference between slow and top speed is hard to manage on a small screen (Galaxy S7).

Otherwise, this is my kind of game. Thanks for putting it together. It runs smoothly and is a nice sized download. Ads aren't super intrusive and I like not having to sit through 30+ seconds.

Big_Black_Cat3 karma

Very valid critiques. Main reason for both (restarting as triangle and going down a notch when consuming a smaller shape) was to try to get the game to play out longer and balance out the difficulty of it. Otherwise, it probably could've been played through in like half an hour. I also thought it would feel more rewarding going all the way from a triangle to a circle in one go.

Thanks a lot for checking it out btw!

LazyTriggerFinger4 karma

What advice do you have for web/game developers to land a job? Is there anything you did to get more exposure or get through the filter to the shortlist? How long did it take for someone to give you a shot?

Big_Black_Cat1 karma

If you're starting out new/don't have prior job experience, having a portfolio of projects you've worked on is probably going to help you stand out the most (especially to recruiters).

This guy's portfolio was a huge inspiration when I was doing mine. It's very design-oriented and flashy, so probably more well-suited for a front-end dev job rather than back-end. This is what mine looks like.

Besides that, I would say to make sure your LinkedIn profile is up to date and filled in with any key words recruiters might be searching for. You can also reach out to a recruiter directly that works at a company you want to apply to to find out if you'd be a fit right away.

Norgeroff4 karma

What color is your toothbrush?

Big_Black_Cat5 karma

Grey :)

TheBigGrizzly3 karma

What is your favorite coding language?

Big_Black_Cat6 karma

This might be an unpopular opinion, but I really love Javascript. There are so many frameworks and libraries that let you do so many crazy things with it so easily (Angular, Phaser, Matter, D3). And it's perfect for all skills levels and requires very little setup.

vamos202 karma

When did you start coding? How did you learn it? How long did it take? And what would you advise for newbies?

Big_Black_Cat2 karma

I started early 2016 and came from zero prior programming knowledge (I was an archaeologist before this). I was absorbed in it as soon as I started, so even though I was working at the time, I still put in a lot of hours every single day after work. This was also around the time my husband and I first started dating and 90% of our dates consisted of meeting at a coffee shop to code something together.

In the span of a year, I picked up HTML, CSS, Javascript, jQuery, Angular, and PHP and created a portfolio of some of my projects which landed me a junior dev job. Once you land your first job, you learn SO much very quickly and I find that you advance pretty quickly from there.

My biggest advice for someone starting out fresh is to build yourself a nice portfolio of your projects. Not just because it looks good, but also because it's a great way to learn a lot. The more diverse it is the better!

ittofritto2 karma

Kudos! I'm also a web dev and do games as a hobby, however using native technologies.

What are some of the most frustrating limitations you encountered while developing a hybrid game?

Big_Black_Cat1 karma

So many frustrating limitations! It's a very time-consuming process to make sure the game is working smoothly on the gazillion versions for iOS and Android. But a really weird issue we encountered was that the web audio we were using was causing really bad lagging in the game (only in app form). Switching over to native audio fixed that, but it just wasn't something we were expecting would cause performance issues, so it took a while to figure out what was going wrong.

edvin1232122 karma

I'm assuming React Native since you talk about React a bit. How did you find the development experience? I find that it's incredibly intuitive when it comes to writing code but I've had some stupid issues in trying to setup certain packages/libraries that would randomly crash my app and then would have to even start over. I find React much better and like the Web much more than mobile.

Edit: Looked over at the blog and this is some impressive stuff. Looks great! I wish you both the best in future endeavours!

Big_Black_Cat2 karma

Thanks so much :) We just used JS (with Phaser as a game library). We might try React Native one day, but I'm not sure how well it works for games and whether there are any game libraries that would integrate with it. I think we want to focus on Unity for our next project.

Goreka2 karma

What other programming languages do you have any kind of proficiency in?

Big_Black_Cat1 karma

I use PHP + Symfony and Typescript + Angular at work. So I guess I would say I'm proficient in those. I've used some other ones in the past, but I haven't touched them in a while now.

Google_Earthlings2 karma

Are you concerned with the message your game may be portraying to children? After all competition is the completest expression of the battle of all against all which rules in modern civil society. This battle, a battle for life, for existence, for everything, in case of need a battle of life and death, is fought not between the different classes (or shapes), but also between the individual members of these classes.

Also, why does eating a triangle turn you back into a square if you're a Pentagon?

Big_Black_Cat9 karma

Honestly, that's exactly how I was hoping it would be taken. This asshole triangle that's stepping over his friends and family to try to get ahead. When you die there are blurbs of text that appear from the shapes that point out how he should just be happy with who he is and that there's nothing wrong with being a triangle. And when you finally get to circle, everyone becomes your enemy and you have to avoid all the shapes.

techbear722 karma

Why not put an option in the in app purchases to remove ads, or better yet offer an option to purchase a”pro” version of the game which doesn’t have ads at all which is better for people if the app disappears for any reason?

To be clear, asking this as a genuine question, not a “will you do this” (though I would like that) I’m curious as to why some games like this don’t have those options? Surely you can’t make THAT much from the ads?

Big_Black_Cat1 karma

We make VERY little from ads. Unless the game goes viral, it's not something you can expect to make a living off of (or even buy a cup of coffee with). It doesn't hurt to throw them in, though (just in case). I think our ads are pretty non-intrusive. It's only one pop-up ad that appears every 5 games. Not even a video, since I found those very annoying myself. I didn't think it was worth making a pro version when you'd be getting so little more out of it.

Chazmer871 karma

I learned web development as a kid. When meta tags were still in use and tables were all the rage (and fuck css)

Every now and then I get the urge to learn the more modern style development but it's so much repeating stuff

What would you reccomended to get from there to where we are now?

Big_Black_Cat1 karma

I think the best way to learn those things is to think of a project you'd really like to make and then force yourself to use the technology you're interested in.

There are a lot of different options (vue, Angular, React, etc...) which may seem overwhelming. I'd say pick one and stick with it for a while before trying the others. If you're looking for a job, you may want to search for job ads in your area and see which one is most popular.

Inferno4561 karma

Do you use a lot of templates and then change/add stuff when you start mini projects? I’m a student and I find it super hard to start from scratch but taking a past project then changing it makes it much easier for me. Is that common practice or is it still expected to know how to write from nothing?

Big_Black_Cat1 karma

I think both skills are important. At work we have reusable templates/libraries that help us get new products out faster. But you still definitely need to know how to build things from scratch in cases where you're doing something completely new. Also, during interviews you'll be asked to come up with solutions to problems from scratch.

I would try completing some side projects from scratch without looking at anyone's code. It will be really frustrating at first, but after a while you'll feel comfortable doing it.

NedThomas1 karma

Given the interest in hybrids, have you looked into what Microsoft is doing with things like Blazor and Xamarin?

Always been a fan of Flatland, I’ll have check out the game.

Big_Black_Cat1 karma

Thanks very much. I've heard of Xamarin but haven't tried it out yet. I was planning to look into Unity next since a lot of indie games seem to be made with it.

throw-away-1776-wca1 karma

What resources have you found to be most helpful in learning these skills, and if there are any specific sites/pages, would you mind linking to them?

Big_Black_Cat1 karma

Phaser has a great repository of examples that I found extremely helpful while making the app:

https://labs.phaser.io/

They give you code examples and let you edit them to see how that changes the behaviour.

For the absolute basics of Phaser, we started with this tutorial:

https://phaser.io/tutorials/making-your-first-phaser-3-game/part1

For more advanced topics, we found this tutorial to be really enlightening:

https://phaser.io/tutorials/advanced-rendering-tutorial

Linux_is_awesome1 karma

What was the most annoying bug that you had to fix?

Big_Black_Cat1 karma

One of the most frustrating parts was getting the app to be full screen on android. Cordova has a full screen setting, but it doesn't kick in right away because Cordova takes some time to load after the app has been opened. Eventually we figured out how to modify the underlying Java code so to make it full screen before Cordova gets loaded.

rattatally-5 karma

Will you vote in this years election? And if you do, who will you vote for and why?

Also, what's your favourite Pokémon?

Big_Black_Cat2 karma

I don't live in the US, so won't be voting.

I like the ice cream cone pokemon from the newest games :)