Discussion on Kids Puzzle Adventure - HTML5 iOS Android Game


gruvy supports this item


This author's response time can be up to 1 business day.

36 comments found.


I’ve purchased the game.

Can you please guide me on how I can change the work effect at the end of each puzzle? Also, is there a way to change the shapes of the puzzle?

Thank you :)


- Which effect in particular do you mean?

- Unfortunately the puzzles must be squared at this point, several changes in the code must be done to change this behavior.

At the end of each puzzle we see the word built with the letters. I want to show the whole word together… (It will be in Hebrew)

You need to make 2 changes

1. In the file www/js/game/scene.js @ line 730 there’s this code
this.tileRoundupTime = this.tiledText._deployTime*1000;

which stores a delay for the TTS utterance and the word animation to be started. You need to set it to a small fixed value such as 100 (100 ms to deploy the word), or shorter if preferred

this.tileRoundupTime = 100;
2. In the file ww/js/game/ui.js there’s a function called GAME.UI.TiledText.prototype.deployAnimated, find the line # 50 where there’s a “delay” parameter for the character animation, like this:
{width:this.tileDim.w, height:this.tileDim.h, time:1, delay:0.3*i, transition:"easeOutElastic",

then set it to 0, so there’s no interval between each letter animation:

{width:this.tileDim.w, height:this.tileDim.h, time:1, delay:0, transition:"easeOutElastic",

Hi, Can I put the UI buttons (setting and mute) on all the screens? I’ve tried to put them on the episode scene with no success..

I’ve sent you an email. thank you :]

Thank you very much! The email you sent me was very helpful !!!

You’re welcome!


kunix Purchased

Hi Gruvy,

i tried to omit menues and selection to jump directly to a one and only puzzle, but I could not manage that. Any ideas to achieve that rather easily?

With best regards



could you elaborate a bit more? So once one clicks the logo in the menu screen, it leads to a puzzle, and what would happen when the puzzle is completed?

How do I change the max width and height os the game? And I would like to avoid the episode and puzzle select screens, my idea is going from the star screen directly to the first puzzle and add a buttons to go to the next puzzle.

There’s a global function located @ www/js/lib/gruvy/engine.js line 135 that returns the screen size for any instance of the game, just set any fixed values and ir will adjust every content accordingly, e.g.:
getScreenSize : function() {
        return {w:800, h:600};

And controlling the puzzles the way you’re planning requires a significant amount of custom work. I can only give you hints in this case:

1. Prepare your game-data so that there’s only one episode with all the puzzles you want to include in the game 2. Set the menu screen to go directly to the Puzzle Scene
switch (option) {
        case "start":
3. Send all the puzzle data directly to the PuzzleScene, now that the EpisodeScene won’t serve for this purpose: On js/game/game.js @ line 35 store the PuzzleScene instance in a variable
var puzzleScene = GAME.SceneManager.createScene("puzzle", "puzzle");
and assign the data for the desired episode like:
puzzleScene.puzzleData = episodeData[0];
(you must declare the “puzzleData” property in the PuzzleScene beforehand). 4. Modify the preload function for the puzzleScene (PuzzleScene.prototype.preload) so to look like the following:
PuzzleScene.prototype.preload = function() {


    var episodeSID = this.puzzleData.id;
    var nextPuzzleID = this.puzzleData.puzzles[0].id;

        {"graphic" : [{"id" : episodeSID+".puzzle."+nextPuzzleID, "src" : "episode/"+episodeSID+"/puzzle/"+nextPuzzleID+".jpg"}]}

    this.queuedPuzzleID = episodeSID+".puzzle."+nextPuzzleID;
    this.base.preload.call(this, this.queuedPuzzleID);

There I’m using the puzzle data obtained from the game to load the first puzzle (index # 0) coming from the game-data. Ypu’ll need to write your own logic to navigate over all the puzzles the way you want it.

5. Modify the function that retrieves additional puzzle data, such as the TTSWord so that now will be extracted from the one we passed direclty from the game on step #3

so js/game/scene.js @ line 722:
this.curAccessData = this._manager.scenes["episode"].getCurAccessData();
may become:
this.curAccessData = this._manager.scenes["puzzle"].getAccessData(0);
Meaning that there could be a new function for the PuzzleScene class to be like:
PuzzleScene.prototype.getAccessData = function(_index) {
    return this.puzzleData.puzzles[_index];

With this method you can retrieve the necesarry data for any puzzle the way it worked before through the episode.

For the UI controls you’ll need to replicate what’s been used already in the game.

Hi bro,

1/ Did you support for Countdown time ?
2/ Did you support for iOS 9.x ?

Thanks for great jobs.

I’m use Vietnamese language, so the font incorrect with my language. How to change another font ?

How to change from square to rectangle with puzzle image ?

Hello. Somehow I didn’t get or overlooked this question on my email.

- Do you mean playing a different music track on each puzzle? Unfortunately it isn’t possible with the product as-is. Requires custom work.

- For the font I used this app : http://www.bmglyph.com , to create the character layout that the engine requires to display the text. There are other alternatives such as http://kvazars.com/littera/, http://www.angelcode.com/products/bmfont/ (Windows), and more if you Google “bitmap font generator”. You could use that or any other similar app to choose the character set you want and export then as a FNT and PNG files that you need to replace at assets/graphic/font. The special look (border, bevel and color effects) were done with photoshop, over the PNG file exported by the font generator. You can do the same to customize the look and feel of your typeface.

Also keep in mind that the Text to Speech feature will only work if the language its supported by the platform. I believe iOS does support it, not sure about Android or browsers though. You’ll need to set the language id from the code at:

www/js/lib/gruvy/engine.js @ line 887 this.ssu.lang = ‘vi_VN’;

- Finally the puzzles must be squared, can’t be rectangles at this point. That’d also require custom work :|

Best regards.

I’m almost done with the game! Wonderful mechanism and the code is very easy to change! Just one thing left – the cut-out puzzle is very low quality in mobile… Is there any way to smooth the pixels?

sure, The game is on this URL: http://game.hop.co.il/odelia/html5/puzzle-hayim/

Also, I added sound to the game (now you can only hear the click on the puzzle) and it works fine on the desktop but not on android (didn’t check in on IOS yet…)

Do you know why?

Hey, apparently antialiasing is only supported in Chrome and for certain graphic objects. You can try setting the 5th parameter in the function PIXI.autoDetectRenderer to true. www/js/lib/gruvy/engine.js @ line 180
var renderer = PIXI.autoDetectRenderer(w, h, null, false, true);

Regarding the music, depending on the file size it may take several seconds more to load and start playing (music is always loaded after all other assets in the game), or could be that your browser doesn’t support the file type your music is in for playback. For example Firefox won’t play mp3 but OGG files instead. Try to always provide both if that’s the case.

thank you! it did the trick! :]

HI, I just want to have one episode. In your file just “the farm” not “another episode”. can you please guide me on how I can change this?


Hello, you’ll need to do the following:

At www/js/game/scene.js @ line ~82, change the line

which redirects into the Episode-selection scene, into:

this._manager.scenes["episode"].queuedEpisodeID = "farm";

instead of “farm”, use the ID you’re assigning to the episode within the game-data.json file.

Also go to the function EpisodeSelectorScene.prototype.onBackToMenu ~@ line 330 of the same file, and change the line
so that the return button on the episode scene takes the user back the the menu screen and not the episode selector.

thanks, can you guide me how to take the user directly to the puzzle screen and not to the episode selector?

oh, my mistake. i got it. :-)

Hi, how can I get Sound to the Scene and the puzzle? Which code is it?


Hi, you’ll need to create an entry in the game-data.json file within the “ui” sound batch, something like:
"sound" : {
            "ui" : [
                {"id":"intro", "src":"my_intro_music_file.mp3"}
"episodes": [
The file “my_intro_music_file.mp3” must be located at www/assets/sound/ , and I recommend to include both the MP3 and OGG formats of the file within the sound folder so that most browsers will be able to play it.

Also check the error console of the browser for any possible errors regarding the files not being found.

You can find more details info in the product docs. : http://gruvy.co/docs/Kids_Puzzle_Adventure#Sound

Hi, Can I put the UI buttons setting to all screens or is it possible to but the setting menue before each puzzle game?


Or is it possible to put the UI settings (easy, hard,...) on the first page under the moving picture?

Hi, I’ve previously helped somebody to put the settings option in all screens. Please contact me through email to share you the answer because it’s extensive.


I am currently developing a kid focused website. I would like to add the kids puzzle game to my site, however, I would like to know how possible is it to change the episodes & puzzle templates to include my own designs vs the existing templates.

Also, is it possible to edit the look of the template? (eg. Include logo on the splash page etc)

Hello!, yes, it’s not only possible but easy to do: please refer to the docs here: http://gruvy.co/docs/Kids_Puzzle_Adventure#Customization , in “Basics” for a comprehensive description.

Also, other UI textures (like logos, buttons and so on) are simply PNGs located in some assets folder, you can simply replace them with your own.

thanks a bunch. do you have an email address I can reach you? I may need to hire you to execute the changes

You can reach me by email from my profile page, but unfortunately I’m not available for hiring.

Hello ! Great product, some pre-buying questions:

- I can add an unlimited Puzzles packs right ? - I can push the project to the play store and iTunes store (from xcode) by using cordova - Is there any analytics platform ? Thanks for your feedbacks !

1. Yes, you can add unlimited Episodes. 2. Yes, although the project was last built and tested on iOS 9.0. 3. No analytics platform available within the project.

Hello, The game is not compiling on iOS. When I type cordova run iOS , the compiling is starting, but after some time i got this error: https://ghostbin.com/paste/tarwj

ANd on Xcode: http://websolutis.com/ticket/pictures/2016-09-08_12-31-32.jpeg


jys saw the new version, thank you !

Just tested your new build. I guess there is some improvements needed there https://www.youtube.com/watch?v=VuLQl4LZo6E

Hi, the issue shown in the video doesn’t happen in an actual device. The game is made to always be played in Landscape mode. The simulator allows you to pick any orientation via contextual menus though, for previewing purposes.

Make sure to disable the “Portrait” orientation from the project’s General settings in Xcode. This may also prevent undesired orientation changes in certain devices.


Vyclo Purchased

{id”, name”, puzzles {id”, TTSWord“}, {id”, TTSWord“}, {id”, TTSWord“} ]}

Also make sure your Cordova version matches the required:
v4.2.1 for iOS / v5.2.2 for Android
From the terminal:
cordova platform version android
cordova platform version ios
Update if lower.
cordova platform update android
(same for ios) If that doesn’t help you’ll need to send me an email with the whole terminal output as a text file, so I can have a better idea about the issue.

Vyclo Purchased

Hey, I succeeded in building the APK but when I try to upload to playstore it says I have to have a debuggablee APK, any Ideas on how I do that ?

You may not being signing your App correctly, please follow closely this guide: https://cordova.apache.org/docs/en/dev/guide/platforms/android/index.html#signing-an-app

Hello, my app is live on the app store. It’s great, but there is problems: - The settings are not saved (I need to select each time Medium difficulty - The puzzles already completed needs to be re-done everytyme the app is launching


Hi, unfortunately that’s by design… There’s no state saving feature in the game. I should rather specify that in the project description, although the issue didn’t rise until now.


Meddhh Purchased

Hi, i am a beginner, i ask with what, can i edit this application i try android studio but doesn’t work.

Hi, this App is HTML/JavaScript based, you can use any Web editor to edit the files.


Meddhh Purchased

Thank you for your quick reponse, so how can i convert to apk file ?

The project uses Apache Cordova to build native applications for iOS and Android. You need to setup your environment as explained here: http://gruvy.co/docs/Kids_Puzzle_Adventure#Porting_to_mobile_devices_via_Cordova_.28Phonegap.29 Then you’ll be able to build for any platform. For Android or iOS, Cordova will create an Android or Xcode project in the folder “platforms”. Those you can open from Android Studio or XCode respectively.

I was hoping to add an image link back to the website I was going to put the game on. Would you be able to offer advice??

Hi, you can follow closely the example of a code-canyon banner the game shows in the menu scene while in dev-mode:
From: www/js/game.scene.js : 66

        this.ccAd = new PIXI.Sprite(GAME.AssetManager.fromCache("codecanyon-ad"));
        this.ccAd.interactive = this.ccAd.buttonMode = true;
        this.ccAd.click = this.ccAd.tap = function() {
            window.open('http://codecanyon.net/item/kids-puzzle-adventure-html5-ios-android-game/9070600?WT.ac=portfolio&WT.z_author=gruvy&ref=gruvy', '_blank', 'location=yes');