Skip to main content

Posts

Showing posts with the label html5

Tiny Town Racing

 I have finally released the Tiny Town Racing game on itch.io with donations enabled. I am hopeful this will bring in some revenue stream. Would be  great to have a steady steam of income through this channel.  It was a fun experience to go through  the process of building the customizations. I especially loved the state machine stuff and that i should stick to using it even if the game is small. The tradeoff for amount of code is worth it just because it is so manageable as the project goes on.  Enjoy the game online at Poki.  https://poki.com/fr/g/tinytownracing

Post Processing Effects (Cocos Creator 3.2)

Adding post processing effects to a game helps you change the visuals dramatically with fairly low effort. So when i wanted to change the look of the game that im making using Cocos Creator i couldn't find a well documented way to do it :( The only documentation available asks us to create a flow and im' not entirely sure where that plugs in as its' surprisingly light on details.  Check for yourself   Post-processing · Cocos Creator While I was searching for answers I found somebody suggest that this should be done the old-school way.  Render to Texture and a Full-Screen Textured Quad .  Fortunately this setup was pretty easy to do within Cocos Creator. Create a Render To Texture Resource Set the game Camera target render as this resource.  Add a new Camera and a Quad to the scene (set the flags to be different from the original game objects/cam hierarchy)  Create a new post-process material for assigning to the Quad.  Create a new Post-Process Ef...

Tiled TMX Objects to Physics Objects (CocosCreator3.2)

So i've been using the Tiled editor for creating the background for the pixel art game i am making. Somewhere down the line i decided it made sense to have the walls of the level be automatically generated based on the tiled Editor instead of setting it up in the Cocos Creator. So how do you do it? 

Building an Endless Jumper using Godot engine

Godot has a lot of features that are specifically designed for the 2D game development. This also means that there is almost always more than one way to implement a game.  You can play online before you read any further: https://vkrishna.itch.io/color-jump Things I wanted to achieve: Flexibility to design chunks of gameplay Build a procedural system to use these chunks A workflow for quickly treating it the chunk changes Attempt 1: I created an array of strings which would represent each rite if the world. Though this sounds ridiculous at first it works for a jumper game as the horizontal movement is limited. var block = [ “[___________]”, “_______” ] The advice structure worked fine but I quickly ran into a problem. It was getting hard for new to visualise  what The chunk was going to look like. So I wanted to leverage the tile map editor from engine to do the level design as well Attempt 2: I had good format for describing the chunk but it ...

EnvMap in CocosCreator

We wanted to get envmap effect implemented to ensure that we are able to show shiny surfaces. Since it wasn't clearly defined or showcased for cocos creator, i assumed it might not work. I wanted to make sure its' easy to setup so we don't loose a lot of time setting up a whole new renderer. Fortunately, the cocos creator engine has already setup the required pieces in place to get this working. I've been able to get this working on Cocos Creator 2.2.2. Here is the gist for implementing the same. Here is how it looks in action :

Google Analytics in Cocos Creator Web Games

Integrating google analytics for a web hosted cocos game is similar to integrating GA in normal websites. Add analytics.js download code to index.html use "ga" object to track events in the game.  This gets tricky if you want to do the same for a game that is running from within a mobile app. i.e, if you are embedding the web build from cocos creator into an android / ios app and loading it from disk for displaying in webview.  Add analytics.js download code to index.html Make GA use localStorage if you are not allowing cookies in webview. Disable the protocol detection in GA  Following is the code snippet to do it: Hope this helps anybody who is trying to achieve the same :)

H5 Engine Comparision

Recently i was trying to get a game out for the mobile web. I wanted something that would be able to publish light weight game and had a good workflow for artists and developers to get things going as soon as possible. Requirements: Support for Mobile Web GUI for level design Workflow for UI animation Support for 3D games Ability to publish for Native Mobile [Good to Have] The candidates: Unity (unity tiny)  Cocos Creator PlayCanvas Three.js I understand that other than the first two most of others don't have a way to publish to native mobile but the reason i choose them is because mobile web was the first priority and all of them seemed to have good support for it. Criteria Unity Tiny Cocos Creator Play Canvas Three.js 3D WebGL ❌ ✔️ ✔️ ✔️ UI Animation ✔️ ✔️ ❌ ❌ Particle Systems ✔️ ✔️ ✔️ ❌ Editor Support ✔️ ✔️ ✔️ ✔️ Custom Shaders Exp Exp ✔️ ✔️ Native Mobile ❌ ✔️ ❌ ❌ Based on ...

HTML5 games with Python

I am a big fan of HTML5 games. I understand their limitations but given the trend of high powered mobile devices and ubiquitous nature of the web, i believe it's one of the best ways to distribute simple and light weight games. I've been participating in PyWeek for a while now and have been trying to pickup and use different libraries available in python for game dev. The last two times i participated in PyWeek, i added partial support for cocos-creator in cocos (python version of cocos2d-x). This helped me accelerate the Development but i was always stuck with making builds that would fail on different operating system due to library handling etc. This is when i started to look for deploying Python code to web.. the first time around the only thing that i came across was pyjs/pyjamas which i was unable to get started with as they were blocked at python 2.7.* I needed something that worked with the latest of python. Recently though i came across " Transcrypt " ...

Unity Game (WebGL) as a Firefox Extension

Firefox is known for its' extensions. That's in fact one of the main reasons people still use it. They had to take a bunch of bold steps in the recent times to stay relavant, like ending support for older extensions, changing the security model and the api. Firefox  announced a new contest for addons, The Firefox Quantum Extensions challenge. I thought ill' give it a shot. I quickly looked up the documentation for creating an extension and looked pretty simple, there was this game for 2048 i was super excited to put games as extension, quick access short games might workout  i thought.. I wanted to check if i could use my existing game dev tools to create an extension.. hence Unity for FF Extension. I quickly exported unity game as WebGL and tried loading it as an extension. I ran into issues with something called CSP i don't remember seeing it before but here it was preventing me from loading the unity webgl game as firefox extension. After a bunch of mucking arou...

LoL Wars

Have you ever had a discussion about the game that you just played?..how about that awesome game where you took down a bunch of enemies or turrets..or provided amazing support to your team? Well we have built a small trump card game with the data from the last couple of games that you played in league of legends. We built this for the api challenge that has started recently, asking developers to build some apps using the api they provide to expose the user/game data to other apps. You can see it in action here If you wish to try it out..have a go at it.. Note that this is still a proof of concept with a bunch of use cases still not handled... You should be able to play with your friends without problems though. You can play LoL Wars If you would like to contribute to the project Head to github project

Godot H5 build

The Godot engine is a pretty good alternative for any of the 2D/3D open source engines out there. One if the features that got me excited about the engine was the Html5 support. With one click of the button you can export the game onto any of the platforms android, iOS, mac, Linux and html5. The only problem... The h5 exporter didn't work right out of the box for 1.0 version of Godot. I looked at it and was unable to figure out what was going on. I searched their forums, Facebook page and the only answer I got was that it was broken and that the devs knew about it. The html5 exporter was based on emscripten . I downloaded the source code and tried to compile for h5. The platforms is described as JavaScript. The compilation was working fine but linking not so much. It would report a lot of unresolved symbols .. The basic things like gd script were not working. I had to look up how scons worked. Had to figure out why the existing build wasn't working. ... Then I came ac...

Images in DIV

I;ve always had problems placing images in the div elements. its' not that i cannot place an img inside a div element.. it's hard to place it at the right position. But ive' come across this interesting trick which has been kind of a revelation for me.. http://jsfiddle.net/y6a7xqqj/ Try out the above jsfiddle test i created. It's amazing how flexible it is.     background-position: 50% 50% There is a short hand representation for all the properties that are covered by background.. background: url('urltoimg') no-repeat 50% 50% This is the most beautiful thing ive' come across for positioning an image. You should be able to center the image where ever you feel like. 

Our Kitchen

Kitchen by gizmo_thunder on Sketchfab Here is a quick 3D model i built for designing our kitchen. It was fun doing it. I really didn't do the scene graph properly  as i was trying to get it finished quickly. But it does represent what we wanted to achieve :)L

SVG as level description file

If you ever wanted to use svg as a level editor for your HTML5 games.. here is the basic code you can use. Obviously you have to make sure that your svg file is using only rects instead of any other type if you want to use this code as is.. But its' a good basic start for getting you started. I've used the color of the rects in svg to determine how it behaves in game.. you could offload it to the editor (i.e inkscape in my case) to add properties to the rects which can be read and used to determine properties. $.get("drawing.svg", function(res){                 //loading the data from an svg file.                 blocks = [];                 user = null;                 ball = null;                 var $layer = $(res).find('g').first();             ...

SpaceGame 48-hr GameJAM

I've participated in my first 48hr gamejam. I've technically spent a lot less time but i've managed to get a prototype up and running and im' pretty happy with the way it turned out. I would have liked to add more things but time is running out so i had to cut corners. Here are the things i wanted to accomplish: 1) Bring out the tangential learning about Gravitation. 2) Make use of the gravity (since it's a space theme). 3) Wanted to do something different with the art. The concept came pretty quickly once i just drew up a mock up screen.. The rest of it was to get the mechanics right.. I used the CAAT engine so i can focus on the game itself, and bother less about the rendering. Which did help, but i also had to spend time looking around the documentation to figure out if there was a better way of doing something i would have just coded straight.. but it did payoff.. I got a playable prototype very soon. I tried to get some artwork done with inkscape base...

Online Leaderboards

Iv'e been on a look out for easy to use online leaderboard services for a while now. Scoreoid.net is the latest one i came across. The best feature of using this service?.... you can use it through absolutely any platform.. and they have good documentation for all the important things http://wiki.scoreoid.net/ . I've been working on a lot of html5/javascript based games. I could have used any of the standard javascript libraries to use the scoreoid service (since it uses the cgi based implementation) but i didn't want to bring in a whole library for just a simple ajax request. So i wrote a simple javascript function to make it easy to use the service.. Following is the code for the function. And assuming most people use JSON for response type while in js realm i've forced the function to use JSON. Using it is just making a function call and you should provide callback to handle the returned json object. You can know the details of what to send as parameters t...

Color World (in progress)

Work in Progress It's true what they say about how 80% of the work gets done in 20% of the time and the rest is spent trying to get the project done. I had a prototype of a simple puzzle game over a weekend. Then i just left it in the dark. I really liked this game because it was born out of my love for "tripple town" a simple but addictive game. I realized this was quite similar to another game i wrote SQUARED   for the mozilla game dev contest. At the time i was really happy with the "art style" but now not so much.. but i did still enjoy the gameplay. With some tweaks it could be a fun game on the "touch enabled" devices. I've been working on and off this weekend on getting one of my prototypes to a presentable state.. here is a comparison.. Prototype in game Screenshot Ive spent a lot of time today trying to find the right service for getting the leaderboard up. I was using playtomic.com but with my perceived notion of their un-availa...

Canvas Experiment

I just discovered that you can put in your script and render stuff to the blog. Pretty cool hopefully i can put a whole game in it. I remember trying this before but it didn't  work seems to be working now :D. It's pretty easy to get it just go to the html of the post and post your javascript and it works :) well not all of the things but for now this should do :)

DroidRun as Pokki

Droid run is the first game i developed using the CAAT library. The code isn't exactly the most beautiful and well organized but i've managed to get it working but then getting it to work as a pokki was a whole other story. I was too lazy to do it but gathered just enough motivation to make it because i did start writing this game for the pokki 1UP contest. In a rush to get to the finish line .. i moved the code around like crazy and made a lot of local variables as globals and just hacked away at the code without thinking much.. i just wanted to get it working.. may be next time ill' try to be a little more cautious.. :)  I do plan to add in new features like ability to buy costumes and stuff but it can wait. concept art Any way if you are interested in getting the pokki for your computer.. click on the button below..  Download Droid Run for Pokki

DRUN

The CAAT library is really cool for doing html5 games. I was impressed by the demo they had for the library. So i started to think of simple game ideas that i could quickly implement using this library and make it look good as well. Im' always in a rush to finish coding the games ive' started writing so they miss the fine touches of ui animations and stuff. I thought this could be a good library to start experimenting with to get some thing up and running really fast. Since this is the first time i'm using this library i haven't really used it the most effective way but I did have a lot of time to fine tune the gameplay and artwork. Im' yet to integrate the score board into the game but i'm pretty happy with the way it stands right now. Click to Launch Droid Run The basic idea in the game is to be able to jump to three different heights and the user has to choose wisely based on the obstacle course. The aim is to last as long as possible and collect as m...