• Content Count

  • Joined

  • Last visited

About omarojo

  • Rank
    Advanced Member

Contact Methods

  • Website URL

Profile Information

  • Gender
  • Location
  • Interests
    Creative Coder

Recent Profile Visitors

891 profile views
  1. @ivan.popelyshev Im having the exact same issue. In my case... it doesnt show up in Safari (11.0.3 - Desktop). But if I try it in my friend's Mac with same Safari version, it shows up perfect. Firefox 58.0.1 (shows fine) Chrome 63.0.3239.132 (shows fine) Opera 50.0.2762.67 (shows fine) I dont know why in MY safari doesnt work .. but in my friend's it does. You can try it, Here is the website: BTW.. this worked: var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb, transparent: 'notMultiplied'}); this didnt work: app.renderer._backgroundColorRgba[3] = 1.0; But still.. that doesnt explain why my Safari doesnt show up anything.. but in another computer with same Safari version.. it works fine.
  2. I see... well youtube/vimeo setup is a no go, because that requires a stable internet connection. For something that is just a videoplayer for kiosk touchtable in a museum. Videos must be stored in disk. The idea is to have a list of videos thumbnails with descriptions and be able to select which video to play, maybe add some extra UI goodies and effects. But maybe Phaser is not the right tool for this.
  3. can I ? I thought I had to load the files to memory before using them. What is the sample code to stream a video from disk ?
  4. Hi there community, I will be building a video-playlist player. And I was wondering, what is the most efficient way to play the videos without consuming the RAM memory. Imagine we have 30 large videos. Obviously loading them to memory at the beginning of the game will kill the memory. So what do you recommend to play them and not break the experience with looooong 'Loading' screens every time the next video is played, or the user presses the next button or selects from the scroll. This is for a museum, so the idea is that users can switch thru the videos fast and easily,
  5. Apparently, not doing; fixed the problem.
  6. Im getting an error, on console but only after I come back to the same stage. Im using Chrome. ='kentevideo'); // See the docs for the full parameters // But it goes x, y, anchor x, anchor y, scale x, scale y,, 0.5, 0.5, 1, 1); // true = loop;Before switching to a different stage I do;;Which works great the first time, but then I come back to the same stage. and I start getting those Uncaught TypeError: Cannot read property 'removeEventListener' of nullc.Video.playHandler @ phaser.min.js:25 I think it happens every time the video makes a loop. Any idea?
  7. How can I animate a Group scale, on its center ? I cannot change the anchor of a Group because it doesnt have any. Any workaround ? I think this feature is very important to have. Because sometimes we create objects like characters or worlds that have multiple elements and groups, but you cannot change its scale at its center for animations. Any ideas ?
  8. Neve mind... my group was out of bounds.. thats why I didnt see it.
  9. I created a subclass of a Group. When I add that group to the game world, it shows properly right. But when I create a s standard phaser group, and then add an instance of my group subclass to that normal group.... I see nothing. Only when I add it to the game world. any ideas ??
  10. Im doing,this.thegame.renderer);And I get a pixel perfect texture, the only issue is that some elements are not rendered in that texture. I have no idea why. My code WarpGroup.js line 197 the problem is.. Im adding ThreadGroups (Thread.js) into that WarpGroup, and they get added properly and animated and everything. Is just that the generateTexture is not rendering them. just those ThreadGroup instances. everything else is fine.WarpGroup.js line 147 and 162 is where I add those objects (the ones that are not rendering in the generateTexture) This is so bizarre...
  11. Sorry I didn't undertand. So you mean .., null);My code WarpGroup = function () {, null); this.threads = []; for(var i= 0; i<9; i++){ this.threads[i] = this.create(i*30, 0, 'thread'); } };WarpGroup.prototype = Object.create(Phaser.Group.prototype);WarpGroup.prototype.constructor = WarpGroup;WarpGroup.prototype.doSomething = function(){ }EDIT: I got it... it was, game, null); WarpGroup = function (game) {, game, null);...In main game ... this.warp = new WarpGroup(;;Thanks for your support
  12. Okay so I figured out how to generate a base64 image out of the canvas, send that base64 string through the network and save it in the server using NodeJS. Now the question is: How to take a screenshot ( .toDataURL( ) ) from just a specific section or phaser group, not the entire canvas. So someone told me in the PixiJs forum that I would need to create a extra canvas, add the content there and then generate the base64 data again using .toDataURL only to that temp canvas. So this is what I am doing. crop:function(){ var copyText =,; var copy = new Phaser.Sprite(,0,0,copyText); var graph = new Phaser.Rectangle(0,0, 175,300); copy.cropRect = graph; copy.updateCrop(); // copy.scale.setTo (0.5,0.5); //Scale the sprite, this could be useful later var second_game = new Phaser.Game(175, 300, Phaser.CANVAS, 'second_game'); second_game.preserveDrawingBuffer = true; second_game.add.existing(copy); this.postImage(second_game); //Generates the base64 image }As you can see.. I create a second_canvas, and add a cropped sprite to the canvas, but it doesn't add anything. When I take the screenshot its all black, and even the html element on screen is black. Why is it not rendering anything ??? I've tested this without the second canvas.. and the sprites gets added to the original game canvas properly cropped. The problem is the second_canvas that doesn't show anything. I also tried no specifing the html element in the second game constructor: new Phaser.Game(175, 300, Phaser.CANVAS); I heard you can't have 2 phaser instances in the same page, unless they are using CANVAS as the renderer. So my main game is running Phaser.AUTO (WebGL) and the second_game in running Phaser.CANVAS postImage Function postImage: function(s_game){var image64 = s_game.canvas.toDataURL('image/png');console.log(image64);$.ajax({ url: 'http://localhost:3000/kente' dataType: 'json', type: 'post', contentType: 'application/json', data: JSON.stringify( { "image64": image64}), processData: false, success: function( data, textStatus, jQxhr ){ console.log(JSON.stringify( data ) ); }, error: function( jqXhr, textStatus, errorThrown ){ console.log( errorThrown ); }});}ohh.. and Im also getting this in the console Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'b.Sprite._renderCanvas @ phaser.min.js:3b.DisplayObjectContainer._renderCanvas @ phaser.min.js:3b.DisplayObjectContainer._renderCanvas @ phaser.min.js:3b.CanvasRenderer.renderDisplayObject @ phaser.min.js:5b.CanvasRenderer.render @ phaser.min.js:5c.Game.updateRender @ phaser.min.js:9c.Game.update @ phaser.min.js:9c.RequestAnimationFrame.updateRAF @ phaser.min.js:14c.RequestAnimationFrame.start.window.requestAnimationFrame.forceSetTimeOut._onLoop @ phaser.min.js:14
  13. okay so it was too difficult, so I ended up doing this. Phaser Game var image64 ='image/png'); // console.log(image64); $.ajax({ url: 'http://localhost:3000/kente', dataType: 'json', type: 'post', contentType: 'application/json', data: JSON.stringify( { "image64": image64}), processData: false, success: function( data, textStatus, jQxhr ){ console.log(JSON.stringify( data ) ); }, error: function( jqXhr, textStatus, errorThrown ){ console.log( errorThrown ); } });Server Running Nodejs + Express + MongoDB app.route('/kente') //standard response .post(function(req,res, next){ console.log("::: Receiving base64 Image") // form files //console.log(req.body.image64); if(req.body.image64 != undefined){ var base64Data = req.body.image64.replace(/^data:image\/png;base64,/, ""); var buff = new Buffer(base64Data, 'base64'); var filename =; fs.writeFile("public/community_uploads/"+filename+".png", buff, function(err) { if(err == null){ //SAVING IN DATA BASE var thePattern = new PatternModel({ url: filename + ".png" });{ if(!err){ console.log(">Pattern saved"); var pttrn = {, url:thePattern.url, first_color: null, second_color: null, created_at: thePattern.created_at}; io.emit('patternSaved', pttrn); return sendErrorResponse(res, 200, 'Pattern Saved !'); } else { return sendErrorResponse(res, 400, err); } }); }else console.log("Error Saving to Disk Image: "+ err); }); }else{ return sendErrorResponse(res, 400, 'Missing base 64 image'); //custom return function } });
  14. Is there a way to instanciate this new group subclass, but not add it to the game the moment is instanciated ? customGroup1 = new MonsterGroup(game, 'ufo', 'bounce'); That shouldnt add the group to the game.. until I say so. Is there a way to do this ?
  15. omarojo

    Set group Height

    oh I see.. so the group size will be as big or as small as the objects take space inside of it. I see.. FYI: I did add some objects inside the group and then printed the height again.. it is now > 0 I kinda wanted to add objects inside the group using the group height and width. Like adding a sprite just in the center of the group, not the canvas.