Play in the Browser!

getitongoogleplay

Earlier this year I redeveloped my affiliate costume store from the ground up. Costume-Depot.com got a full overhaul from the back end to the front end. It is pretty slick and you should really go check it out. However affiliate marketing is pretty tough these days. I’m not particularly gifted with advertising and marketing knowledge or even a lick of business sense for myself.  So for me to bring value to my affiliate customers I’ve taken the full transparency approach. I don’t hide what the sites are and I don’t try to trick people.

That being said I had to ask myself the question, “How do I bring eye balls to my costume store?” Enter: TinyWitch

With as much fun as I had with kaBOOM! I knew that game development was something I was going to explore a lot more. Specifically I was going to be targeting HTML5 Games as it is “What I know.” I looked at a few different HTML5 frameworks for making games and even tried to make some stuff without one.  In the end I settled on Phaser 2.0.  Phaser is AWESOME and the HTML5 game development community around it are all a great bunch of folks who help one another.

So with my new tools it was time to try and make something. I figured I would start out with something basic and Halloween-ish. A simple time waster type of game you could play for a little bit and stop. I settled on the classic arcade style shooter. This enabled me to learn the fundamentals of Phaser and also of game development in general. As many games as I have played throughout my life I never until know really had to sit down and be in that creative drivers seat. So it was a new experience for me.

Understanding the core mechanics of “how a game works” came pretty quickly to me. It is mostly pretty intuitive if you have been programming for a long time. The update loop, building functions to destroy, create and move assets around was easy to conceptualize.

I also knew I wanted to have that “App Store experience” so I was determined to port TinyWitch to the Google Play store. I used ludei’s CocoonJS builder to package up my game and build the APK.

So check it out @ http://tinywitch.devdm.com or download it to your Android Device on the Playstore.  Hope you can have a little fun with it.

 

21 Comments

In migrating my blog over to my DevDmBootstrap3 WordPress theme I created this child theme you are seeing now. I’m calling it ‘cleanblog’ and I’m making it available for others to use in their projects.

Learn more about ‘cleanblog’


 

Leave a Comment

(Cross Posted from Main Theme Website)

A new version of Bootstrap (3.2.0) came out last month on June 26th. You can read about it on the Bootstrap Blog here.

I’m glad there was a new release as DevDmBootstrap3 was starting to look like a dead project on the theme directory. This isn’t true as we are still seeing downloads all the time. I’m fielding new emails every week with people asking questions and contributing to making things better.  So I’m happy that we are now able to push out an update to make our “Lasted Updated” date a little more current.

Most DevDmBootstrap3 theme users will have this change go unnoticed. The JavaScript and CSS bugs fixes/changes will just be there. If you find yourself having trouble be sure to review the Bootstrap documentation which has grown and gotten better. Your child theme might need some tweaks to get it fixed. You can always email me (danny@devdm.com) and I’ll try to help.

I also added one conditional function check for “devdmbootstrap3_wp_title” inside the functions.php file.

Thanks to user chicchera for pointing this out to me. We are now checking to see if the “devdmbootstrap3_wp_title” function exists before we use it. This enables people to overwrite it easily. I debated adding conditionals for the devdmbootstrap3_theme_js and devdmbootstrap3_theme_stylesheets functions but the wp_dequeue and wp_enqueue systems are in place for that.

I’ve also gone through the entire site here updating screen shots, code and added more information where I could.

We also have a new translation available!

Romanian – ro_RO.mo | ro_RO.po

Thanks to Ciprian @ http://brainie.ro/ for providing us a Romanian translation.

Child Theme Update

The child theme has been updated to include the new LESS file structure with the 3.2.0 update. I’ve also included the fonts directory with the child theme. The fonts were breaking for some users who were compiling the LESS files and using wp_dequeue_style to remove the parent themes’ CSS. We were also double including the parent theme’s css file with an @include so that has been removed.

Leave a Comment

Just a quick link back to a list DevDmBootstrap3 was featured on.

 

Leave a Comment

I made a “do it yourself” trivia game called kaBOOM! I built it on top of Angular over the last couple weeks. I learned a lot and I want to share it with you.

Why make a game with Angular when there are so many game-centric JS libraries available?

I was REALLY struggling to find projects to use Angular with that matter. I’ve built a silly masonry.js photo gallery and some RESTful API front ends but I was doing all of that with straight PHP/jQuery before.  Nothing was being made special by using Angular to do those things. It just… “wasn’t needed.” But I know Angular is the future. I know it is powerful. There has been this “thirst” within me to have a chance to work on something that would really let me get to know Angular and really build out a larger front end only application.

I wanted a project that had three things:

  1. It would let me build something with Angular that people would find useful.
  2. It would let me explore many DIFFERENT aspects of what Angular is capable of when you build something the “Angular” way.
  3. Fun!

My fiance is an ESL (English as a Second Language) teacher. She showed me a game she plays with her students where she would make up a list of questions from the lesson. On a piece of paper she would make a grid with the questions and some “bombs” in the squares. She would recreate this grid in a large scale on her whiteboard but only put numbers in the squares. Using her key she created earlier she lets her students pick the numbers and reads them the question or goes, “kaBOOM!” when there is a bomb.

Once she told me about it I instantly knew that it was something I wanted to try and make. I really want to learn more about making browser based games and I really want to learn more about Angular. So I sat to work.

 Where to begin?

Well first things are first. I needed to scaffold the thing. For the first couple days I think all I did was make directories and folders filling them with the different assets I thought I was going to need. It felt like I was buying all the lumber and sketching out plans for my own fort kick ass.

I used the standard bootstrap with a bootswatch to get a solid CSS grounding to stand on. I threw in some Font-Awesome for good measure.  I knew the game had to work on mobile devices. I don’t know why but it is carved into my soul to ALWAYS be programming for tablets and phones. I knew with those tools I would be able to do that easily.

Moving Parts

I decided on the popular Animate.css to handle most transitions and fancy interface moves. For sprite animation a jQuery plugin called jQuery.animateSprite.

Sound

I had never worked with sound like this before. I knew I needed something I could easily control and let users control. Something flexible that would play nice with Angular. Welcome howler.js to the kaBOOM! foundation.

Angular add-Ons

Local Storage: I knew I wanted to use browser local storage to keep the game data. If things get popular I can’t pay to store all of this data and handle the traffic. Plus the app needed to be “self sustaining.” I used Angular Local Storage by Greg Pike for this.

UI Router: A no brainer. I had never used it before but so many people are swearing by it I knew I had to give it a shot. I don’t 100% understand all its majesty but I got it to do what I needed.

Loader: Trying to call ng-show all the time was becoming a pain. I was glad for the auto loader provided by Mr. Fancy Pants.

[play kaBOOM!]

Resources and Credits

4 Comments

Privacy Policy | Refund Policy | Contact