Leaderboard


Popular Content

Showing content with the highest reputation since 03/24/19 in all areas

  1. 3 points
    Hello, My goal is to update a small part of a texture the fastest way possible with WebGL2, preferably using Pixi.js v5 (RC 3 is out). Am I right that a RenderTexture is going to re-upload the whole texture whenever there is a change? (this would not be good for a big texture, hence why I am looking for another method) I'm a complete noob when it comes to OpenGL, but I've googled a bit and figured that I can use gl.texSubImage2D() to upload just the part of the texture that I need to change. I didn't find a way to get the WebGLTexture object of a PIXI.Texture, so to be able to use that command I did something like this (not the complete code): renderer.addSystem(PIXI.systems.TextureSystem) renderer.TextureSystem.contextChange() // needed to do this loader.load(main) // and could not use gl.texSubImage2D() on tex before the loader called main function main() { let tex = resources['test'].texture let imgData = new Uint8Array(32*32*4) renderer.TextureSystem.bind(tex) renderer.gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) renderer.TextureSystem.unbind(tex) } But I wish that I had the WebGLTexture available so I could avoid messing around with PIXI.systems.TextureSystem, because I don't really know much about it or when and how it should be used. I also want to read the previous data and change it, I figured it can be done with: gl.readPixels(0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) But that needs the frameBuffer to be binded first... Hence I tried to also use the PIXI.systems.FramebufferSystem, lol: renderer.framebufferSystem.bind(fb) //fb = new PIXI.Framebuffer(tex.width, tex.height).addColorTexture(0,tex) gl.readPixels(0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) But it was not that easy, I didn't even find a way to unbind it. But I guess it is not supposed to be used for my little problem...? Maybe there should be some Pixi.js functions to do this? Maybe something similar to this: texture.getPixels(x, y, width, height, ArrayBuffer) texture.setPixels(x, y, width, height, ArrayBuffer) I'm new here btw, this is my first post I don't have much Pixi.js experience yet, but I really like it.
  2. 3 points
    No bans are happening here (yet). @5neia_opo2@google-mail.ooo, try to understand the frustration people are experiencing. A new user came to the forum and in nearly every post they made trashed the project they were asking about. A lot of people here put in a lot of time and effort to not only to develop the project, but answer questions here as well. I was definitely frustrated reading your responses as someone who has put 6+ years of their life into this project. @botmaster did a poor job of handling that situation, but has apologized and I'm sure will do better in the future, as will you as well. Let's all be adults about this, acknowledge we did something wrong, and move on. @5neia_opo2@google-mail.ooo you are free to ask any question you need help with, but I definitely recommend reading through some tutorials, the examples, and checking the API docs before asking questions. It will often lead to you finding the answer yourself, and there will be less fatigue for the people answering here on the forum. I'd also recommend you approach things you don't understand, or decisions you disagree with, with a more open mind. Try to learn and grow the new library, not all libraries are alike and different problem spaces call for different solutions. Having a bad attitude is a good way to earn ill-will in the community and you may no longer get the help you expect if you are ungracious about it. When you find inconsistencies, or things you think should work differently, then change it! Pixi.js is an open source library built by the community. Everyone gets a chance to make the library better by contributing to it. The best way to get problems you have fixed, are to fix them yourself.
  3. 2 points
    That's exactly why a year ago we've added this awesome API into v5. Right now v5 is almost there, and you can experiment with v5-rc3. I really hope that you like that system because I made it exactly for cases like yours, it was VERY difficult to explain to everyone in the team and get an approval. People need access to textures, authors of PixiJS cant possibly know everything that user wants. This is how you get GLTexture: https://pixijs.io/examples/?v=v5.0.0-rc.2#/textures/gradient-resource.js if you call "baseTexture.update()" somewhere before the frame, it will notify TextureSystem that texture needs updating , and then when one of pixi renderers asks to bind that texture, it will call "TextureResource.upload" method. That's how it happens: https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/TextureSystem.js#L139 According to our main image resource, https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/BaseImageResource.js#L64, you can track the state not only by dirtyId, but also by "glTexture.width/height" . Basically, if width and height are wrong you upload whole texture, otherwise you go for subImage. As for previous data, readPixels is tricky thing, its the only synchronous operation there. When I use it, I call it only after whole render(), only one time. I suggest to maintain your copy of teture independently from glTexture: in an array or in canvas in your TextureResource, that way you wont need to call readPixels(). SUMMARY: If glTexture width and height are wrong, upload whole array. Otherwise modify part of array you need, put that part into temporary array and call subImage. Dont forget to set width and height to correct values. and HAPPY DEBUGGING!
  4. 2 points
    TheBoneJarmer

    The future of web games

    Oh yeah, I remember reading that discussion. Well, to give my two cents. I think that discussion was pointless to begin with. I understand the question since there are not many popular hmtl5 games, but I would not call it dead, far from it. Web is a platform like PC, console and mobile. Most game devs use an engine like Unity3D or Unreal and export their game to platforms they can support. But games get exported more often to platforms where their game can run native because most games are too big to run smoothly in the browser. I mean, just look around and see how many devs actually created a 3D game in html5. Barely. And if someone did, is it probably low-poly. But that being said, that would be the only con I can think of. The biggest pro, and the reason I decided to go for HTML5 game dev, and not Unity or Unreal or any other engine, is because it is soooo damn easy compared to writing your game in C# or C++. I mean, all you need is a good IDE for web dev and your browser. And players don't even have to download your game. Heck, if you want to, you can put your game in a cordova container and export it to Android or iOS as if it is nothing. And just look at all the available resources. There are engines like Game Maker or Construct that allow you to export your game easily, as well as lots and lots of frameworks like Phaser, Pixi, MelonJS and so on. And also, since your game is actually a webpage, it can be integrated easily in many front-end technologies like Angular, ASP.Net, PHP and even NodeJS with Electron. That is also a very powerful benefit. Not to mention webhosting. I mean, a basic webhosting service is enough to host your game on since html5 games do not tend to be gigabytes big. Give it time. I admit I cannot think of a popular html5 game, but I am sure other forum members can fill me in on that one. I do see some gems once in a while. But those are often not only for web, but native too. They just have a web variant. You wont find yourself a whole RPG, but smaller games. But I like those, I am often very tired after work and to be able to play some small games while being half braindead is awesome, and very relaxing.
  5. 2 points
    I am making UI Components Framework for Phaser 3, that is driven by JSFL-generated jsons and atlases. It means that you can build your UI in Abode Animate, export it with given script, and forget about manual code positioning and building stuff! Please, try it out. https://xense.github.io/phaser-ui-comps-docs/tutorial-showcase.html Docs, examples, tutorials: https://xense.github.io/phaser-ui-comps-docs There are two basic things in this framework. First is ComponentClip, which is a view instance, it is recursively self-build by provided json and atlases. Second is UIComponentPrototype, which is clip controller. It can be easily extended to create any components, windows or whatever you need. Essential meaninig of it is that it doesn't need a clip to exist always. For example, you can change states of a root clip, and child clip can get new clip instances, ore lose them, and nothing bad happen. Some base components are already included UIButton has 4 states, "up", "over", "down", "disable" UIButtonSelect same as button, but behaves like checkbox, has 8 states, by adding "_select" suffix to UIButton's states when selected. UIButtonRadio Selectable buttons, that can be grouped to select only one of them. UIButtonDraggable same as UIButton, but also emits drag event, drag bounds can be self externally. UIScrollBar vertical or horisontal bar with draggable thumb and prev/next buttons. UIProgressBar Setup only start and end elements positions, scale, rotation or alpha, and this component will interpolate them according to provided progress value. UIScrollPanel Helper for scrolling any element with UIScrollBar. UIContainer Base container component to add other dynamically created components inside. Can be easily extended to create any types of lists, for example. I'm still working on new components and extending existing functionality. Tell me, would you use it, what other components you may need, and whatever you think about it. Any feedback is appreciated! Also I'll be thankful for any collaboration. Available at GitHub and npm
  6. 2 points
    b10b

    ctx.clearRect() not working with Image.

    @James432213 hi, many issues here, all solvable. 1) The function named "canvas" rename this and avoid some confusion, call it "init" or similar 2) doKeyDown function has parameter "e" but references "event" in the switch - be consistent. 3) the functions doKeyDown, updateCanvas, drawPlayer are scoped "above" the "init" function, so they can have no easy reference to the "canvas" variable defined within "init". Notice also the name collision of "canvas" if we ignore step 1. Easy fix is to move these function declarations inside the "init" function. 4) There's nothing wrong with ctx.clearRect Some basics in how to debug your code will be beneficial, in particular the developer console (F12) is great, and using "console.log" can send helpful messages there from your code. Use that as a start towards watching the flow of your code when it runs, and where things are not actually working as might be expected on a first draft of code. This will lead to more advanced debugging techniques and more elaborate (and working) code.
  7. 2 points
    Do you draw something else than the video to canvas? If something taints a canvas then it stays tainted no matter what is rendered in the future. Or it might be due to stream becoming unavailable at some point for short duration and that could cause tainting (though the bug report I found on this should be already resolved, it was 5 years ago). Pretty sure it's some kind of edge case in security constraints which causes canvas to become tainted (by something), which causes security error when pixels are read from it.
  8. 2 points
    -AAG-

    I hate designing levels!

    There! I said it! 😡
  9. 2 points
    mattstyles

    I hate designing levels!

    Procedural generation can be a load of fun, but its a butt-ton of work to get working well. You could even use a genetic algorithm (GA) to create levels, have an automated actor play them, test the 'success' of the actor using fitness functions and then loop that process until you get levels (again, based on a heuristic function) that are fun to play. The up-shoot is that you can, potentially, create a near infinite number of levels like this. Or at least generate a manageable amount (say, 30) and manually curate them. Depending on how good your heuristics are you can create levels that are harder or easier for humans to play. It's a ton of work though. So depends on your mindset. Some crazy people find that a wonderful coding challenge.
  10. 2 points
    there is no public property available but you could use the following private property timer._pause working example: var timer = game.Timer.add(1000, function() { sprite.remove(); }); if(timer._pause){ console.log("paused") } else{ console.log("Not paused") }
  11. 2 points
    I had some similar problems with this yesterday so I wrote up the workflow I found to work step by step. Hope this helps anyone else who finds this thread in the future. https://www.adammarcwilliams.co.uk/creating-bitmap-text-pixi/
  12. 1 point
    demiculus

    SVG Cache Problem on Chrome

    After a lot of googling I've fixed the problem with adding crossOrigin: true .add('tile_lumber', getImagePath('tile_lumber.svg'), { crossOrigin: true }) I have no idea what crossOrigin does or how it works but it seems to have solved the problem. I got the answer from If the problem occurs again, I'll post here.
  13. 1 point
    https://github.com/pixijs/pixi.js/blob/dev/packages/interaction/src/InteractionEvent.js#L52
  14. 1 point
    AlienplayGames

    Link It Up!

    Link It Up! is a casual, puzzle platforming game. In this game you need to link up the line to make your way through the level. Link It Up! features 30 levels that include interesting puzzles as well as cool platforming challenges. You can Play it here: https://www.newgrounds.com/portal/view/729389 Link It Up! is available for non-exclusive licensing so if you're interested in licensing it contact me via email: alienplay44@gmail.com
  15. 1 point
    enpu

    ThreeJS and FBX file

    I have now added new "FBXexample" scene to the example project of Three.js plugin. It shows you how to load one FBX model and play animation on it. It does have embedded texture.
  16. 1 point
    In general: handle animations, events and cleanups separately. app.ticker.add(() => { //code that updates ALL MY ANIMATIONS MANUALLY }); app.ticker.add(() => { // suppose we want to clear someContainer let children = someContainer.children; let j = 0; for (let i=0;i<children.length;i++) { var child = children[i]; if (child.dead) { //delete it somehow, remove from list of animations and so on } else { children[j++] = i; } } children.length = j; }); Of course it has to be adapted to your style of coding and your case. I know that most people when they start something more than stupid demo stumble across the problem, and I provided PR in PixiJS that adds API but it was too experimental for our team, it was rejected. I'll try to make it again this summer. It was about `detachChild` thing that handles actual removal later, after all events.
  17. 1 point
    themoonrat

    PixiJS Examples

    Hi all Just to let you know that we've moved examples for PixiJS version 4 to https://pixijs.io/examples-v4/ and the regular examples page at https://pixijs.io/examples/ are targeting the upcoming PixiJS version 5, using the latest APIs rather than deprecated version (`Sprite.from` rather than `Sprite.fromImage`, for example). All v5 examples are also in ES6+ now. If you land at the wrong one, don't worry, the menu on the left lets you easily switch between the 2 pages. The main point of this post; what examples would you like to see added? Is there anything you found tricky when you first started using PixiJS? Any techniques you saw posted on here that you think should get better visibility? Please let us know what you'd like to see, and we'll have a good pool of ideas to start with. And if you feel like helping us out by creating some examples for us, please go for it! Thanks
  18. 1 point
    wait a moment, making a demo. I believe we have something like that in v5, i dont remember about v4.
  19. 1 point
    You could create a simple test case where you have a canvas, you draw the video there and then read a single pixel from it. If it gives the same error, then the video causes tainting. If not, then it's something else.
  20. 1 point
    That makes sense! Mad respect Ivan, you are always very helpful! 🤘
  21. 1 point
    I'm setting the starting width of the blueBar rectangle based on how long a chord needs to be held. Then I decrease the width of the blueBar in the game loop: const holdBar = new PIXI.Container(); let blueBar = new PIXI.Graphics(); blueBar.lineStyle(2, 0x006ba6); blueBar.beginFill(0xffffff); blueBar.drawRect(0, 0, Math.floor( 8 * (howLongDoesTheChordLastInMs / 16.67) - 50 ), 10 ); holdBar.addChild(blueBar); containers.current.holdBar.children.forEach(blueBar => { console.log("my linestyle is:", blueBar.lineWidth); if(blueBar.x <= 100){ blueBar.width = blueBar.width - 8; } else{ blueBar.x = blueBar.x - 8; } } The result is that the lineStyle is getting chopped off even though the console.log still shows a lineWidth value of 2. My guess is that the lineStyle is getting hidden by the container, or that graphics don't like having width dynamically changed in the game loop. Thank you for any advice on how to fix this! 😁
  22. 1 point
    I've been asked to apologize so here it is, I apologize. That user can keep blasting PIXI post after post I will not respond to it.
  23. 1 point
    ivan.popelyshev

    Pixi js editor

    There are solutions but nothing is easy. There's pixi-svg https://github.com/bigtimebuddy/pixi-svg that can take info from svg. There's also Tiled editor and https://github.com/eXponenta/pixi-tiled that allows to take polygons and sprites from it, but I dont remember if it has export to graphics, but hey, you can add it! Currently I work on solution to open SWF files so people would create graphics in Adobe Animate. I think that you can do something for your case, I saw that teams who made games on pixi with their own engine always did their own editors. I do not know why there is no Graphics, I never needed it and I guess people hold their stuff and dont release it I think that https://twitter.com/Pix2d is going to add support to pixi soon.
  24. 1 point
    mattstyles

    Is it like backstabbing my clients?

    If an 'adequate' amount of time has elapsed then I think it makes sense, it turns their license in to what is something like an 'early access' license (and, by that, I mean, they get it before everyone else, not like steam early access which is before its ready), which almost certainly isn't what is written in the license but it almost certainly isn't prohibited either. As you have a good relationship with them, maybe ask them what they think and how they think they might react? I'd like to say that they understand business and you're just driving profits and that it is all really rather understandable and totally normal for you to make enough money to feed yourself and buy a few nice things, but some people are hard to judge. For what its worth, so long as a decent amount of time has passed since the initial (and often only) license was sold I don't see any conflict with attempting to monetise your back catalog. Keep them sweet by promising lots more top notch games they can license before everyone else
  25. 1 point
    Sure you can. If you're brave enough you can use webRTC over UDP and create you own UDP stack to handle packet order/drops etc. This has an additional advantage of less overhead in each message and that in turn means possible performance improvements.
  26. 1 point
    Ok, that makes a lot of sense. I was going to optimize the image anyway. Good to know. I will try this after lunch. I have to congratulate the PIXI devs. So far it has been a very pleasant experience working with PIXI. My only issues so far have been related to my inexperience with PIXI and integrating it with other tools. I am loving it.
  27. 1 point
    botmaster

    def

    For people coming from Flash I recommend working with typescript based projects, not javascript based projects. Setting up PIXI with typescript projects is a little bit more tricky but the familiarity and ease of development and concepts for former AS3 coders is worth it. PIXI in itself is fairly similar to AS3 framework but there's a learning curve like with any new technology. As for direct conversion (like old Flash project > to typescript/PIXI project) that's a totally different idea. Converting code is not the problem, converting to something that maps to PIXI or other WebGL based framework is the main problem. I did solve it to some extend by building a mapping framework on top of PIXI that mirrors as much and accurately as possible the AS3 framework but that's not perfect. Better would be a true WebGL/typescript based framework that mirrors/provides out of the box all relevant AS3 classes/methods for a near seamless code conversion, but that is a very big project and javascript poor handling of scope and circular dependencies makes it impossible anyway to match perfectly the AS3 framework.
  28. 1 point
    Why does any stable release version of pixi not have properties that change the z-order of sprites/containers? I see that the development v5 version has it. Why has it taken 5 major versions before someone realized that zOrder would be a good idea. I'm probably being ignorant but I would like an explanation because it seems pretty important when rendering graphics
  29. 1 point
    Excellent tutorial! Really helped me alot
  30. 1 point
  31. 1 point
    enpu

    Definition animations with sprite names.

    There is actually three different ways to use addAnim function. 1. Use frame indexes addAnim('run', [3, 4, 5, 6, 7]); 2. Define start frame index and number of frames addAnim('run', 3, 5); // Animation starts from frame index 3 and contains 5 frames 3. Use frames that start with specific name addAnim('run', 'anim_run'); // Uses all frames that start with name anim_run Third is handy if you name your frames properly, like anim_run01.png anim_run02.png anim_run03.png This way if you add more frames to your anim, they will be automatically used.
  32. 1 point
    hi @enpu, It looks like I found another small problem with TilingSprites when hires is enabled. config file: game.config = { system: { width: 320, height: 320, scale: false, center: true, resize: false, hires: 2 } }; This is the code. (I added panda@2x.png to the media folder) game.module( 'game.main' ) .body(function() { game.addAsset('panda.png') game.createScene('Main', { init: function() { this.sprite = new game.TilingSprite('panda.png', game.width, game.height).addTo(this.stage); }, update: function() { this.sprite.tilePosition.x -= 100 * game.delta; } }); }); The background now has a gap when it is moved to the left. (This gap is sequential).
  33. 1 point
    Thanks! This should be now fixed in develop version.
  34. 1 point
    TufanMeric

    How to center PIXI.Graphics?

    Oh, right, i completely missed that one. 😳 I got it to work doing this: this.body = new PIXI.Graphics(); this.body.lineStyle(4, 0x000000, 1); this.body.beginFill(0xffff00); this.body.drawCircle(0, 0, 36); this.body.endFill(); this.body.x = this.body.width / 2; this.body.y = this.body.height / 2; this.body.pivot.x = this.body.width / 2; this.body.pivot.y = this.body.height / 2; Turret: this.turret = new PIXI.Graphics(); this.turret.lineStyle(4, 0x000000, 1); this.turret.beginFill(0x9b9b9b); this.turret.drawRect(x, y, 18, 40); // turret offset, sent by server this.turret.endFill(); this.turret.x = (this.turret.width - 4) / 8; // I have no idea why i need to divide it by 8 but it works: bullet comes out of the exact center of it, -4 is the stroke size. this.turret.pivot.x = this.turret.width / 2; this.turret.pivot.y = this.turret.height / 2;
  35. 1 point
    good news I have found the perfect solution!!!!!!!!! I didn't know about this feature in HTML5 but there is a thing called "defer" and "async". Apparently all script tags with async will be run whenever they are loaded whilst the script having defer tag will be run in order AFTER all document is parsed and BEFORE document.onload. Hence the solution is: <head> <!--Code that doesn't care about order--> <script src="/lib/skills.js" async></script> <!--Code that cares about order--> <script src="/pixi/pixi.min.js" defer></script> <script src="/pixi/pixi-layers.js" defer></script> </head> @jonforum thank you for giving me a hint with the import and finding this absolute gem!!!!! To hell with the extra document onload loader
  36. 1 point
    How to check if the timer is paused?? the following is my example code game.createScene('Main', { init: function() { this.animation = game.Timer.add(100, function() { //dosomething }, true); this.animation.pause(); }, I try to using "this.animation.pasued", but not work update: function() { if(this.animation.pasued){ //check if the timer is paused, but not work this.animation.resume(); } any idea??? Thank you very much.
  37. 1 point
    There are two sequential frames from animation, where dragon sprite and attached piece of UI moves from up to down. Left one is normal and right one is bit broken. Sprite itself (PIXI.extras.AnimatedSprite) and number 8 (PIXI.extras.BitmapText) looks perfectly fine through all animation, but HP bar background (PIXI.mesh.NineSlicePlane), HP bar itself (PIXI.Graphics) and number background are not hitting pixels perfectly sometimes and animation looks jaggy. PIXI.settings.SCALE_MODE is PIXI.SCALE_MODES.NEAREST. PIXI.settings.MIPMAP_TEXTURES is false. roundPixels is true. As I said, I have retina screen, so resolution is 2. I'm not sure if issue is reproduced on regular screen. I've searched through the docs but couldn't find any special settings for PIXI.mesh. I can make same UI from basic sprites of course, but NineSlicePlane is so much more convenient.
  38. 1 point
    Exca

    deep and child

    In this case you could also just say .visible = false / true to keep layering constant.
  39. 1 point
  40. 1 point
    ivan.popelyshev

    Fading trail

    I mean "texture.frame.x= something; texture._updateUvs();" that'll trigger sprite onTextureUpdate automatically, because "sprite._textureID" will differ from "texture._updateID" That's why we removed underscore from function name - users should use it when they change frame, its not a private API anymore.
  41. 1 point
    Noel

    how to add ads to facebook instant games ?

    @dataj, I am pretty sure you can find all the information in the documentation. Maybe you forgot to associate your game to your business? https://www.facebook.com/help/publisher/709041312624617/
  42. 1 point
    ivan.popelyshev

    Gradient alpha on a shape

    pixi v4 or v5? Current way is to generate texture in photoshop or paintDOTnet . I can provive new way for v5 today or in weekend
  43. 1 point
    When will you do an individual verification? Lured people and threw. Terrible platform, terrible politics and bureaucracy. Well done. Loss of time, loss of money, loss of nerves - that will give Facebook. Why are you fooling people? Why do people have to waste time and energy? And you give traffic to such crap like OMG and LOL, which is not a game at all. Where is the moderation? Where's the justice? But you have unexpected changes to the rules of publication, deception, bugs, terrible reputation and terribly slow support. You open the platform, people start working. Then you demand that people register their business and without it they cannot fully release the game. Why are you doing this now? Why didn't you do it at first? You are terrible, Facebook is disgusting. You are an ugly platform. Just know it. A platform with not healthy competition, but a piece of shit. Absolute random. Random rules. Random traffic.
  44. 1 point
    Babsobar

    Zooming out on tilemap layer?

    Just wanted to update that this problem was fixed by a recent update of Phaser.
  45. 1 point
    The debug.cameraInfo line of code is from Phaser 2. It doesn’t do anything in v3 (I’m surprised it didn’t throw an error to be honest!)
  46. 1 point
    An update here if anybody else is looking for guidance on building menus of the style above, here's what I did to make mine. Hope this helps. This is how it looks from the code below, more or less; With pages: https://imgur.com/TlpNWcJ Here is the relevant code, it's a lot, but I hope that whatever you might need is given somewhere as an example here: function preload () { //bgs this.load.image('bg', 'assets/bg.png'); //bodies this.load.spritesheet('catbody', 'assets/catbody.png', { frameWidth: 297, frameHeight: 397 }); //eye sprites this.load.spritesheet('cateyes', 'assets/catpupils.png', { frameWidth: 297, frameHeight: 397}); this.load.spritesheet('catface', 'assets/catface.png', { frameWidth: 297, frameHeight: 397}); this.load.spritesheet('catfacegoth', 'assets/catfacegoth.png', { frameWidth: 297, frameHeight: 397}); this.load.spritesheet('catfaceshifty', 'assets/catfaceshifty.png', { frameWidth: 297, frameHeight: 397}); //arrows this.load.image('leftarrow','assets/arrowleft.png'); this.load.image('rightarrow', 'assets/arrowright.png'); //tiles this.load.image('tile', 'assets/tile.png'); this.load.image('smalltile', 'assets/tilesmall.png'); //text menu this.load.image('bodytext', 'assets/textbody.png'); this.load.image('eyestext', 'assets/texteyes.png'); this.load.image('toptxt', 'assets/texttop.png'); this.load.image('bottomtxt', 'assets/textbottom.png'); this.load.image('accessoriestxt', 'assets/textaccessories.png'); this.load.image('bgtext', 'assets/textbg.png'); } function create () { tiles = this.physics.add.staticGroup(); arrows = this.physics.add.staticGroup(); smalltiles = this.physics.add.staticGroup(); text = this.physics.add.staticGroup(); this.add.image(500,300,'bg'); //text menu options bodytxt = text.create(500, 170, 'bodytext').setInteractive(); eyestxt = text.create(500, 220, 'eyestext').setInteractive(); toptxt = text.create(530, 270, 'toptxt').setInteractive(); bottomtxt = text.create(530, 320, 'bottomtxt').setInteractive(); accessoriestxt = text.create(530, 370, 'accessoriestxt').setInteractive(); bgtext = text.create(530, 420, 'bgtext').setInteractive(); //arrows leftArrow = arrows.create(650,290, 'leftarrow').setInteractive(); rightArrow = arrows.create(950,290, 'rightarrow').setInteractive(); //colour tile objects red = smalltiles.create(695, 470, 'smalltile').setTint(0x85251B).setInteractive(); orange = smalltiles.create(725, 470, 'smalltile').setTint(0x874E0F).setInteractive(); yellow = smalltiles.create(755, 470, 'smalltile').setTint(0xB2B037).setInteractive(); green = smalltiles.create(785, 470, 'smalltile').setTint(0x4C7940).setInteractive(); lightblue = smalltiles.create(815, 470, 'smalltile').setTint(0x7F9293).setInteractive(); darkblue = smalltiles.create(845, 470, 'smalltile').setTint(0x383A4B).setInteractive(); purple = smalltiles.create(875, 470, 'smalltile').setTint(0x6F5F78).setInteractive(); pink = smalltiles.create(905, 470, 'smalltile').setTint(0xD6A16B).setInteractive(); //player layers player = this.physics.add.sprite(200, 370, 'catbody').setInteractive(); playereyes = this.physics.add.sprite(260, 350, 'cateyes').setInteractive(); playerface = this.physics.add.sprite(260,350,facekey).setInteractive(); //playershirt; //playerpants; //playershoes; //playeraccessories; //playerbg; //MENU ICONS //eyes normaleyeicon = this.add.image(735,185,'catface').setScale(0.35).setInteractive(); gotheyeicon = this.add.image(812,185, 'catfacegoth').setScale(0.35).setInteractive(); shifteyeicon = this.add.image(893,185, 'catfaceshifty').setScale(0.35).setInteractive(); //MOUSE INTERACTIONS //click colour tiles red.on('pointerdown', function (pointer, red) { colour = 0x85251B; }); orange.on('pointerdown', function (pointer, orange) { colour = 0x874E0F; }); yellow.on('pointerdown', function (pointer, yellow){ colour = 0xB2B037; }); green.on('pointerdown', function(pointer, green){ colour = 0x4C7940; }); lightblue.on('pointerdown', function(pointer, lightblue){ colour = 0x7F9293; }); darkblue.on('pointerdown', function(pointer, darkblue){ colour = 0x383A4B; }); purple.on('pointerdown', function(pointer, purple){ colour = 0x6F5F78; }); pink.on('pointerdown', function(pointer, pink){ colour = 0xD6A16B; }); //click menu text bodytxt.on('pointerdown', function (pointer, bodytxt) { selection = 1; page =0; }); eyestxt.on('pointerdown', function (pointer, eyestxt) { selection = 2; page = 0; playereyes }); toptxt.on('pointerdown', function (pointer, toptxt) { selection = 3; page = 0; }); bottomtxt.on('pointerdown', function (pointer, bottomtxt) { selection = 4; page = 0; }); accessoriestxt.on('pointerdown', function (pointer, accessoriestxt) { selection = 5; page = 0; }); bgtext.on('pointerdown', function (pointer, bgtext) { selection = 6; page = 0;}); //click item icons normaleyeicon.on('pointerdown', function (pointer, normaleyeicon){ facekey = 'faceblink'; playereyes.anims.stop(); playerface.anims.stop(); }); gotheyeicon.on('pointerdown', function (pointer, gotheyeicon){ facekey = 'gothblink'; playereyes.anims.stop(); playerface.anims.stop(); }); shifteyeicon.on('pointerdown', function (pointer, shifteyeicon){ facekey = 'shiftyblink'; playereyes.anims.stop(); playerface.anims.stop(); }); //click arrows leftArrow.on('pointerdown', function(pointer, leftArrow){ page -= 1; }); rightArrow.on('pointerdown', function(pointer, rightArrow){ page += 1; }); //ANIMATIONS var keys = ['cat', 'pupil', 'faceblink', 'gothblink', 'shiftyblink']; var spritesheets = ['catbody','cateyes', 'catface', 'catfacegoth', 'catfaceshifty']; for(var i = 0; i < keys.length; i++){ this.anims.create({ key: keys[i], frames: this.anims.generateFrameNumbers(spritesheets[i], { start: 0, end: 13 }), frameRate: 10, repeat: -1 }); } } //end create //custom functions //helper function, sets individual icon to active/visible to inactive/invisible function setActivity(icon, bool){ icon.input.enabled = bool; icon.setVisible(bool); } //Sets each item icon in an array to active/visible or inactive/invisible function setAllActivity(array, bool){ for(var i = 0; i < array.length; i++){ setActivity(array[i], bool); } } //Displays the desired item menu icons as listed in the current page function setJustOne(all, desired, page){ //i = icon category index for(var i = 0; i < all.length; i++){ //j = array for each page of icons for(var j = 0; j < all[i].length; j++){ if(all[i] != desired || j != page){ setAllActivity(all[i][j], false); } if(all[i] == desired && j == page){ setAllActivity(all[i][j], true); } } } } //tints text icon and clears tint from all other text icons function selected(icon, array){ for(var i = 0; i < array.length; i++){ if(array[i] != icon){ array[i].clearTint() } if(array[i] == icon){ array[i].setTint(0xff0000); } } } //plays the animation key given to the player body function playBody(bodyKey){ player.anims.play(bodyKey, true); } //plays the animation key given to the player's face function playFace(facekey){ playerface.anims.play(facekey, true); playereyes.anims.play('pupil', true); } //helper function for menuOptions(). Ensures page index does not go out of bounds. function pageCtrl(page, max){ if(page >= max){ this.page = max; } if (page <= 0){ this.page = 0; } } //When user clicks any text section it triggers displaying of relevant item icons. function menuOptions(selection){ //icon arrays //2D, bodyIcons[0] = first page array, bodyIcons[0][0] = first item on first page var bodyIcons = [ [], [], [] ]; var eyeIcons = [[normaleyeicon, gotheyeicon, shifteyeicon], [], [] ]; var topIcons = [ [], [], [] ]; var bottomIcons = [ [], [], []]; var accessoriesIcons= [ [], [], []]; var bgIcons= [ [], [], [] ]; //3D array //allIcons[0] = bodyIcons, allIcons[0][0] = First page, allIcons [0][0][0] = first elem in first page var allIcons = [bodyIcons, eyeIcons, topIcons, bottomIcons, accessoriesIcons, bgIcons]; //just an array of interactive text objects. var textIcons = [bodytxt, eyestxt, toptxt, bottomtxt, accessoriestxt, bgtext]; //body selection if(selection == 1){ currentobj = player; selected(bodytxt, textIcons); pageCtrl(page, bodyIcons.length); console.log('selection 1 page:' + page); setJustOne(allIcons, bodyIcons, page); } //eyes selection if(selection == 2){ currentobj = playereyes; selected(eyestxt, textIcons); pageCtrl(page, eyeIcons.length); console.log('selection 2 page:' + page); setJustOne(allIcons, eyeIcons, page); } //top section if(selection == 3){ //currentobj = top; selected(toptxt, textIcons); pageCtrl(page, topIcons.length); console.log('selection 3 page:' + page); setJustOne(allIcons, topIcons, page); } //bottom section if(selection == 4){ //currentobj = bottom; selected(bottomtxt, textIcons); pageCtrl(page, bottomIcons.length); console.log('selection 4 page:' + page); setJustOne(allIcons, bottomIcons, page); } //accessories section if(selection == 5){ //currentobj = accessory; selected(accessoriestxt, textIcons); pageCtrl(page, accessoriesIcons.length); console.log('selection 5 page:' + page); setJustOne(allIcons, accessoriesIcons, page); } //bg section if(selection == 6){ //currentobj = bg; selected(bgtext, textIcons); pageCtrl(page, bgIcons.length); console.log('selection 6 page:' + page); setJustOne(allIcons, bgIcons, page); } } var colour = 0x85251B; var selection = 1; var currentobj; facekey = 'shiftyblink'; bodyKey = 'cat' var page = 0; //Game Main function update () { //sprite layers playBody(bodyKey); //body playFace(facekey); //face/ eyes menuOptions(selection); //select section currentobj.setTint(colour); //tint section }
  47. 1 point
    RAF will fire as fast as it can, synced to display refresh rate. So on 60 Hz display, you get 60 Hz or less. On 144 Hz display it will run 144 Hz or less. On g-sync/freesync/hdmi 2.1 vrr, it can be anything. What needs to be understood here is that phaser doesn't provide you with proper game update loop. It gives you RAF loop (or fallbacks). It's on your to handle whatever you need, e.g. fixed timestep physics with interpolation. V3 had recently added automatic fixed timestep and manual update options to matter.js physics. I'm not sure if the automatic fixed timestep is still running off RAF (which makes the option kinda pointless), but you can use the manual option in any case. In my case, if the game is mostly async tween actions (think match 3 sliding stuff), I just use tweens and don't care about deltatime. As soon as I have any kind of physics or time based logic (even simple speed += acceleration), I switch to fixed timestep with interpolation. I did describe my approach in at least one topic here
  48. 1 point
    Sounds like what you need is to have a sprite child for that graphics object. You see, technically, the entire canvas (whether 2d or webgl, doesn't matter) is one big image. PIXI just draws different parts of the image separately to create the whole. So when you render a container, you will draw each child of that container (whether sprites, graphics, or something else) and all of its descendants (children, children of children, etc) in order from top (root) to bottom (leaves). The different parts may overlap, but at the end of the day the entire tree is reduced to an image. So do you want an image loaded from file to be in the middle of your graphics object? Easy. Just position the image object (sprite) so that it is in the middle of your graphics object. The easiest way to do that is to make the sprite a child of the graphics object, so that its position (x and y coordinates) are relative to the top-left corner of the graphics object. Parent/child relationships are not required, mind you, it is just a convenient way to get relative positioning (and also guarantee that the child is drawn after the parent, possibly overlapping). Does the whole paradigm of drawing position and order make more sense now? With all that in mind, I'll answer each question specifically: 1) Is there a way of doing this, similar to the plain/vanilla canvas way: // untested// 2d or webgl, doesn't matter.var renderer = PIXI.autoDetectRenderer(300,300);var canvas = renderer.view;var stage = new PIXI.Container();var sprite = PIXI.Sprite.fromImage(source);var graphics = new PIXI.Graphics();stage.addChild(graphics);graphics.addChild(sprite);// assuming graphics object is 100w x 100h// graphics position is centered horizontally and vertically relative to stage/canvas.// absolute position of the graphics object is 100 points right and 100 points down from the top-left corner of container (parent).graphics.position = new PIXI.Point(100,100);// assuming sprite object is 50w x 50h// sprite position is centered horizontally and vertically relative to graphics object.// absolute position of the sprite object is 125 points right and 125 points down from the top-left corner of container (grandparent).sprite.position = new PIXI.Point(25,25);// draw some lines n stuff on the graphics object.// Only reason I'm putting it in the ticker is just in case the image hasn't loaded yet.// We'll render 60 frames per second until it does... and after it does!PIXI.ticker.shared.add(function () { renderer.render(stage);});// put the canvas somewhere in the DOM. 2) Is the context (2d), unique to the Canvas? Yes. 2d is a context. webgl is a context. PIXI calls the 2d context renderer "Canvas". Both contexts are built on a "canvas" dom element. Confusing? Yes. 3) Would drawing imaged[sic] to the graphics object limit me to the CanvasRenderer... No. PIXI abstracts the WebGL nonsense (it's pretty arcane) away from your eyes so that you can create sprite objects that can be rendered magically using webgl context or rendered boringly using 2d context.
  49. 1 point
    luckylooke

    Rotate Camera

    Live DEMO p2 used http://jsfiddle.net/luckylooke/uL37am1h/6/
  50. 1 point
    CtlAltDel

    Dealing with mouse wheel

    game.input.mouse.mouseWheelCallback = mouseWheel;function mouseWheel(event) { console.log(game.input.mouse.wheelDelta);}And there are 2 constants as well: Phaser.Mouse.WHEEL_UP and Phaser.Mouse.WHEEL_DOWN. The wheelDelta will contain either of those values depending on the direction of the wheelscroll.