semk

you're right, not sure what i was thinking, maybe iOS

one thing to consider is if you use cordova and publish an app out of your html/js game then that's a pretty strong way of hiding the code since people with the app won't be able to break it down back to js

Hi all, I've just seen that Pixi is now on version 4 which is awesome. From what I recall the pixi-lights plugin for v3 was left on the back burner for v4. Now that v4 is here does anyone know that status on the lights and ray casting?

Updated to fix a couple low performance/fps moments and also high score now syncs properly. Please download and play if you have iOS, android coming soon. Let me know your opinions please, it's always important for us creative types!

Hi all, I've managed to get my game up on the app store now. The people here have helped me along in my HTML5 game dev and I'm much appreciative. https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1113280998&mt=8

Actually I've shelved the webgl project for now and am trying to get my famous.js version running instead. Things work great until I try to test the Game Center integration, I can get it to login but when I try to showLeaderboards or submitScore, the game freezes. I've validated that my Cocoon.GameCenter.Interface exists and isLoggedIn but still freeze after trying and getting no where, i started to integrate the admob plugin and again, same thing, when i call createInterstitial the game just freezes, and this is all through the dev app compilation with both plugins (cocoon social game center and cocoon ad mob) got the ads working or at least a banner ad on the top/bottom, the interstitial fails but i think that's because the app isn't live, can anyone confirm? what about the GameCenter freezing? anyone ever encounter this before? is it because my leaderboard isn't live yet? I've set it up in iTunes connect but it says "not live" under status. both ads working now ok, so looks like there is a type in the integration docs, there is no command called "showLeaderboards" , its "showLeaderboard" ... so i got leaderboard working now, but scores aren't populating, submitScore is called and doesn't freeze now but still no scores in the actual leaderboard when i call it to show

Thanks man, with your experience i hope we can fix my issues Here's how I load my file and my canvas is created dynamically anyway for the framework that i use: "wrapped.js" is everything for my app, matter.js + ivank.js + myapp and this is the error i see (error.png attached), it says range size exceeded on 'timer' but I don't have a 'timer' anywhere in wrapped.js at all.

this gives me another idea though, i had another prototype made with DOM elements... but it also suffered performance issues once i phonegapped it, maybe nativescript will speed that version up, fingerscrossed I'm not sure what the deal with nativescript is, it seem like they want you to reprogram your app using their api, but they also provide a 'wkwebview' plugin straight for cordova, and there is another one from cordova devs themselves, which is supposed to enhance the performance, but for me it doesn't seem to work (neither one) either no performance gain or doesn't load, and the plugins require differnet versions of the cordova ios platform so it was a pain to test actually now i'm stringing together my DOM prototype, restructuring it as cocoon suggests and pushing that to their system and it's producing me an xcarchive that so far has the best performance, this might be what i stick with overall since it's also the quickest path to a pushable app to the app store, looks like cocoon will pull through but not with canvas+ still wish i could get this to work with my webgl version...

after messing around with it for the past few days, NativeScript does not look it it supports webgl/canvas elements yet, looks like some work is being put into it but nothing substantial yet https://github.com/NativeScript/nativescript-canvas I've yet to receive any feedback from cocoon.io support either, there doesn't seem to be a way to turn my game into an app... i guess i have to learn swift from the ground up, this is highly disappointing

thanks a lot man! I was able to figure some of this out on my own, and i'm going for iOS firstly so i had to figure out how to do the provisional distribution and stuff to get it to run on my device, yikes so complicated... right now I can't seem to get my game to run on canvas+ it's just a black screen. I'm using ivank.js which is webgl and canvas so i'm pretty sure it should be supported, on webview+ the game looks distorted and some elements are missing/glitched on webview it works fine but with the same performance of phonegap which isn't very nice because i see frequent stuttering and jankyness any advise on what i'm doing wrong with canvas+ ?

I'm trying to make my game for several months now and I've just become very frustrated with the level of difficulty it takes to port an HTML/JS game to mobile (iOS and Android). I was using phonegap which was a bit hard to figure out but eventually pretty straight forward but the problem was performance, I can't stand the jank I have on my game which isn't even very complex. So I saw a few threads of people recommending cocoonjs which is now cocoon.io and it's not so straight forward as they claim it is. First off I have no idea how to actually build my game in cacoon.io even though it provides you a "web 2 app" button, I hosted my game on my website and I can hit it on my browser just fine and play it, but the build on cocoon doesn't show anything. I can't figure out how to use any of it, it just gives me zip files with nothing but barebones files when I click "compile". Does anyone actually use this? How do you get it to work?

cool, I also have a regular 1080p secondary screen that I used to look at the quality, this retina support fix works on the regular display too so I'll stick with this for my project(s) does it have a significant impact on performance? I imagine it would once the scene(s) starts getting busy and complex? at least more so than resolution: 1 ?

Yes, I guess it's only a problem for retina displays then...

I noticed that changing the renderer resolution to 2 makes a huge improvement. Granted it also makes everything a lot bigger, but at least the rendering is very smooth - edit- Heh... i set the canvas CSS zoom property to 50%, works like magic

Ok maybe that title doesn't make sense? The idea is tied to this - https://github.com/pixijs/pixi.js/issues/27 Basically when the sprite isn't drawn on a perfect pixel location, it gets blurred, not very nice looking. Counter this with CSS3 - translate: rotateZ() - here's a comparison attached, the teal background is pixi.js, the white is CSS3 DOM. What can I do to get pixi to render like CSS3? I'm willing to dig into the renderer code base but I'd need some advice.

I use the alpha 0.7 build of Famous JS and they use this utility called Uglifyify (https://github.com/hughsk/uglifyify) which takes the entire framework and your src files and puts them into one JS called bundle.js, could that be helpful?

Sorry, JS doesn't like var or properties that start with integers. Try this: for(i=1; i < 11; i++){ card['a'+i] = new PIXI.Sprite.fromImage("images/cards_gif/h" + i + ".gif");} then call it out card.a1, card.a2, etc.. Also play around with Xerver's suggestion, arrays and objects are almost interchangeable in JS, but one might provide a better data structure than the other depending on what you're doing.

So what you can do is utilize the Object principle in JS: var card = {}; for(i=1; i < 11; i++){ card = new PIXI.Sprite.fromImage("images/cards_gif/h" + i + ".gif");} Then you can call it out: card.i (where i = 1 thru 10) Try to keep in mind that in JS an Array is an Object.

That's awesome that it will be fully supported and documented in Phaser 3! I found this also, playing around with it and seeing what I can do with it ATM: http://www.html5gamedevs.com/topic/15638-im-having-a-hell-of-a-time-trying-to-get-normalmapfilter-to-work/?hl=normal#entry88695 PS: Anyone that can help chime in on how to port this into Phaser, let me know! EDIT - Looks like this needs PIXI 3.0.7 but Phaser 2.4 is using PIXI 2.2.8 :'(

Necro: I'm going to be trying out some normal and lighting attempts myself. This should be possible even without Phaser/Pixi per this demo: http://29a.ch/2010/3/24/normal-mapping-with-javascript-and-canvas-tag Also, ATM SpriteLamp is out and on sale on Steam. Hope to see/share developments!

Well, I'm personally loving Atlas: http://phaser.io/docs/2.4.1/Phaser.Loader.html#atlas

thanks for the help guys, I'm going to try Tom Atom's suggestion first before I submit any kind of issue. I find it strange that no one else would have encountered this so it must be something on my end, I actually don't have any padding on my sprite sheet so here's hoping that fixes the issue! Edit - So adding padding fixed my pixel issue and setting char.x,char,y to whole numbers on update also fixed my blur!

Maybe try to see if you can put in a property that detects if the player is standing on a moving object, then make the sprite that follows the player use the moving object's velocity as the reference point.

So I'm seeing some sprite artifacting when I move it with velocity: On the left is the sprite when I move it with something like: var speed = 4;char.x += speed;On the right is the sprite when I move it with something like: char.body.velocity.x = 150;and you can see two issues: 1 - general "blurring" of the whole sprite 2 - some pixels ending up on the opposite side of the sprite What I think is happening - It looks like with velocity, since it's tied to a if (key.isDown)function, it can land on decimal number like x = 25.56 depending on when the player let go of the key, and the sprite then arranges itself into the world on X coordinate 25.56, it looks like this causes the x/y of the sprite itself to be "messed up". Any one encounter this and is there a fix other than adding/subtracting whole numbers from the x/y of the character?

Here's one easy way without having to make equal boxes for every frame: use an atlas. Atlas is like a Sprite, except along with the png file, there is also a json file that has information about where each sprite frame is located and how tall/wide it is. I recommend using TexturePacker, you can get a hang of this with the trail first: You'll need to slice up the sprite sheet, perhaps there's a way but I couldn't find one to use a sheet already, so slice it up. This will mean you will have an image file for each frame of each animation, name them appropriately e.g.(zeroWalk0001.png, zeroWalk0002.png, ..etc zeroSlash0001.png... etc) Open a new project in TexturePacker and select "Phaser (JSONArray)" as the type. Now add all the image files into one project on TexturePacker, let TexturePacker arrange them by Best mode, and my personal preference is 0 in all areas for the sprite placement (extrude, trim, border padding, etc), Then hit Publisher Sprite Sheet, and save your resulting png and json files. Now in Phaser, to load your atlas do follow this tutorial: http://nightlycoding.com/index.php/2015/01/phaser-io-how-to-use-atlashash-to-your-advantage/ And this documentation: http://phaser.io/docs/2.3.0/Phaser.Animation.html#generateFrameNames