Leaderboard


Popular Content

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

  1. 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.
  2. 3 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/
  3. 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.
  4. 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 else components you may need, and whatever you think about it. Any feedback is appreciated! Also I'll be thankful to any collaboration. Available at GitHub and npm
  5. 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.
  6. 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.
  7. 2 points
    -AAG-

    I hate designing levels!

    There! I said it! 😡
  8. 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.
  9. 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") }
  10. 2 points
    @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/
  11. 2 points
    ivan.popelyshev

    Fading trail

    Here's the second one, super-v5 stuff: https://pixijs.io/examples/?v=v5.0.0-rc.2#/textures/gradient-resource.js Yes, you can use it as an alphamask. Why do you need though? Your trail is simple rectangle, right? In fact, that's one of common mask use-cases in Flash: alpha gradients. Its shame we cant replicate all that Flash stuff even after several years of coding.
  12. 2 points
    ivan.popelyshev

    Fading trail

    First demo will be here in 5 minutes or so : https://pixijs.io/examples/#/textures/gradient-basic.js It took me only one cup of soothing tea.
  13. 2 points
    jonforum

    Fading trail

    What about create you gradient in other canvas. https://www.w3schools.com/graphics/canvas_gradients.asp var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); and than, create `generate` a texture from this canvas context ? Am sure it can work ... but at the expense of performance. I do not remember which one, but there is a rpgmaker plugin that used this process with pixijs.
  14. 2 points
    I've got a situation my physics simulation is running at high framerate (60fps), but some devices my app runs on cannot run the graphics (PIXI) at 60fps without causing the physics simulation to stutter and jump, causing undesired artifacts. So, in pursuit of performance, I shoved the physics simulator (in my case, matter.js) into a web worker, but then still found that some devices couldn't handle updates at 60fps in the main thread. So I started setting an interval to apply updates from the simulation to PIXI at a fixed rate - 30 fps to start. However, sometimes even on some devices that was unsustainable. So, the question came down to - what FPS *should* my app run at? And when I say "run", I'm talking about changing the position of PIXI objects base on updates from the physics simulation, not about changing the speed of the PIXI's ticker. Since the speed at which I could apply updates from the physics simulation and still achieve sustainable render speeds without lagging varied from device to device, I decided the best way to decide on the FPS to run at would be ... let the app itself decide at run time. So instead of coding a fixed FPS, or giving the user a slider to adjust, I let my app measure and adjust it's FPS based on what it measures as sustainable while it's running. Enter my solution for my app, FpsAutoTuner: https://gist.github.com/josiahbryan/c4716f7c9f051d7c084b1536bc8240a0 - contributed here to the community in case it may help someone else solve a similar problem. It's framework-agnostic, no external dependencies, written as an ES6 class, but could easily be rewritten as a ES5 if you wanted. FpsAutoTuner works by measuring the FPS (which you tell it by calling `countFrame()`) and then every so often (at `tuningInteval`ms), it compares that measured FPS to the `fpsTarget`. When the measured FPS goes below `fpsTarget` less `tuningMargin`, the `fpsTarget` will be decreased by `tuningRate` and the `callback` will be execute with the new `fpsTarget`. Likewise, when the measured FPS exceeds `fpsTarget` less `tuningMargin`, then `fpsTarget` will be increased by `tuningRate` and `callback` will be called with the new target. Example usage: // Somewhere at the top of your file import { FpsAutoTuner } from './FpsAutoTuner'; // Then later in your code, probably in your constructor of your game object this.fpsAutoTuner = new FpsAutoTuner({ fsTarget: 30 callback: fps => this.setFpsTarget(fps) }); This assumes that you have a function called `setFpsTarget()` on your class, probably that does something like this: // This is just an example method, on your own class... setFpsTarget(fps) { clearInterval(this._fpsTid); this._fpsTid = setInterval(this._render, 1000 / fps); } Then later in the rendering portion of your code: // inside the render loop of your code, call: this.fpsAutoTuner.countFrame(); That's it! Your app will now automatically adjust it's FPS as needed when it detects lower/higher frame rates available. (FpsAutoTuner automatically starts it's auto-tuning timer in it's constructor.) There are plenty of options you can pass to FpsAutoTuner to tweak it - they are all documented at the top of the gist. Specifically of interest, you can set `tuningInterval` (default 5000ms) to change how often it measures/changes the FPS. This all has just been a humble attempt to give back to the community. Use and enjoy. Contributions/changes/suggestions to the gist are welcome! Download FpsAutoTuner from GitHub here.
  15. 1 point
    Said in that way sounds very trustworthy. Okay I will make more research around. Think the Firefox forum will be affected too. Thank you very much! I will write when something new emerges on the horizon !
  16. 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! 😁
  17. 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.
  18. 1 point
    Hi all, I'm new to Pixi.js, so excuse me, if the answer to my question is obvious. I'm building a 2d platformer where I have a PIXI.Container which contains a few sprites (let say player's arm, body, head etc.). Based on the user input I'm moving the whole container (not each sprite individually). I also have container which contains all platforms of the level (they are all of type PIXI.Spirte). I want to detect when the player's container intersects with any of the platforms and stop the container from moving forward (the usual stuff). Currently I'm using the Bump.js library (https://github.com/kittykatattack/bump). But I'm encountering few problems. First of all Bump.js doesn't work for 'container vs array with sprites' type of collision, so I've tried to detect an intersection between each player's sprite against the array with platforms. Basically I'm using the following: player.move(); // move the player's container to any direction BUMP.hit(playersArm, platformsArray, true, false, true); BUMP.hit(playersBody, platformsArray, true, false, true); BUMP.hit(playersHead, platformsArray, true, false, true); This is testing for intersection between each player's sprite and stops it from moving, if there is a collision. All this is working fine and if there is an intersection the intersecting player's sprite position will be set to a value that is not intersecting with the platforms. However all the other sprites will continue moving, as they are not yet intersecting with the platforms. Hope I expressed myself clear. Have you ever had such problem and how did you solve it? I can only think of building a custom collision detection logic which works with 'container vs array with sprites', so I don't have to care for each player's sprite individually, but work with the container. Do you know of any library that already handled such cases? Or maybe I've been wrong from the start by taking such approach (having player's container with several sprites in it)? Thank you in advance.
  19. 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
  20. 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.
  21. 1 point
    themoonrat

    def

    That setting adjusts the delta emitted from the ticker, not how often the ticker is emitted. console.log that delta value and you'll see a difference. If the setting is left alone, if requestAnimationFrame can emit 60 times a second, that delta will come out as `1` as it's hitting it's target.
  22. 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.
  23. 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.
  24. 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
  25. 1 point
    SarahJ

    Fading trail

    @ivan.popelyshev Instead of Could you edit the sprites textures frame directly, like: var sprite = new PIXI.Sprite(<gradient texture>); sprite.texture.frame = new PIXI.Rectangle(<...>); // Edit it directly Or is this bad practice?
  26. 1 point
  27. 1 point
    its_ME

    is facebook instant game profitable ?

    i Just start working in fb instant games but from the stories i readed and pics i seen it really profitable .
  28. 1 point
    ivan.popelyshev

    How to center PIXI.Graphics?

    I wish you good luck in understanding how transforms work. Also beware of width/height , those are calculated properties.
  29. 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;
  30. 1 point
    I have added new paused property to Timer class, which is true if the timer is paused.
  31. 1 point
    jonforum

    right click event

    note that the console debug will indicate some missing information in the console. To debug with more precision it necessary to use breakPoint. The information in the console will be obsolete because they are compute only when you open the debug objet and can mislead you.
  32. 1 point
    I am trying to create a click through image gallery for a project in pixi. You can see in my fiddle when you click on the right side of the screen it adds the next image. The problem is when you click on the left to delete the image it will only delete one and not the rest. Can someone please help me with this issue. If you have any more questions, please feel free to ask. If there is a better solution please let me know. https://jsfiddle.net/jacob_truax/5p4n9a8m/2/ const createSprite = function() { imageCreated = true image = new Sprite(resources[images[step]].texture) image.width = 400; image.height = 300; image.x = left app.stage.addChild(image) step += 1 left += 40 } const removeSprite = function() { app.stage.removeChild(image) step -= 1 } loader.load((loader, resources) => { createSprite() }) nextTag.addEventListener("click", function() { console.log("next") createSprite() }) backTag.addEventListener("click", function() { console.log("back") removeSprite() })
  33. 1 point
    kiklop133

    [Phaser 3] Maggot Diorama 2

    Hello everyone, Finally I finished glorified version of Maggot Diorama. It's still a tiny game now with bonus level which is more likely experimental thing. I also changed way to gather money "spend on defense stuff" and now I'm not sure if it's easy to understand how it works tho. https://www.kongregate.com/games/kiklop133/maggot-diorama-2
  34. 1 point
    Thanks for the boilerplates link. That's helpful! As for the second part, indeed what I need are the instanced versions. Thanks for pointing me to the Container, which put me on the right track looking at the API documentation. In this simple, where I'm just trying to wrap my head around Pixi, I guess what I needed was as simple app.stage.getChildByName("name").
  35. 1 point
    taoprox

    Placing objects in a 48px grid

    Problem 1 can be solved by subtracting half the size of the image from both x and y. I am not too sure what you mean in problem 2, it looks like it is aligning properly.
  36. 1 point
    @dataj I already shared the documentation with you: https://developers.facebook.com/docs/games/instant-games/guides/ads-monetization See the "Preload the ad" section to preload the ad when the game starts. See the "Show the as" section to show the ad when the player loses. I am not sure you need to know more than that.
  37. 1 point
    var imageContainer = new PIXI.Container(); PIXI.loader.add("http://127.0.0.1:54508/resources/data/data.jpg").load(function(loader, resources){ var base = resources['http://127.0.0.1:54508/resources/data/data.jpg'].texture.baseTexture; var maxWidth = 2048; var maxHeight = 2048; for (var x = 0; x < base.width; x += maxWidth){ for (var y = 0; y < base.height; y += maxHeight){ var minWidth = Math.min(maxWidth, base.width - x); var minHeight = Math.min(maxHeight, base.height - y); var canvas = document.createElement('canvas'); canvas.width = minWidth; canvas.height = minHeight; canvas.getContext('2d').drawImage(base.source, -x, -y); var texture = new PIXI.Texture( PIXI.BaseTexture.fromCanvas(canvas), new PIXI.Rectangle(x, y, minWidth, minHeight) ); var sprite = new PIXI.Sprite(texture); imageContainer.addChild(sprite); } } viewport.addChild(imageContainer); }); This is a silly question but i'm banging my head for an hour and can't figure it out I'm trying to split an image into smaller texture chunks but i'm getting frame does not fit inside base texture dimensions and i'm not sure why this is happening The image height is 3106 and after the second iteration of the inner loop the y is 2048 and minWidth = 1058 so it should work there is not third iteration of the inner loop to give out of bounds error ... Thanks for reading . also i'm not familiar with ES6 yet, so don't judge
  38. 1 point
    Nevermind i found out my mistake new PIXI.Rectangle(x,y,minWidth, minHeight) > new PIXI.Rectangle(0,0, minWidth, minHeight ) and should change position of the sprites to sprite.position.x = x and sprite.position.y = y
  39. 1 point
    mattstyles

    2D Map Representation as 1D array

    @b10b yep, thats it exactly. I have a central 'store', which is just a big object, technically you could pass class instances (or functions) through as well but I'm not sure the exact downsides of that (easy serialisation is one, but could be worked around easily enough). Re-rendering is a side effect of changes to that central object and will only occur when changes are detected (standard React rendering, which is the same as many true FP languages). You could have both systems side-by-side and have a more manual system to 'tell' certain UI elements to that they need to re-render, I've tried that too with varying success. I think, in my case at least, I could get a lot of benefits from memoizing some transform functions as I'm effectively running the same thing several times each render tick.
  40. 1 point
    Noel

    how to Monetization facebook instant games ?

    @sisko Don't write in bold, it is not nice to the eyes, Have you read our documentation? https://developers.facebook.com/docs/games/instant-games/guides/ads-monetization You cannot use Admob within Instant Games.
  41. 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
  42. 1 point
    Exca

    Help Needed: Improve performance

    It looks like your rendering is not the thing causing frames to go down. Profiling it shows that most of the time goes to javascript. ProcessSurvivor and findfood take most of the time. Optimizing those might help. Also if you have only 200 sprites you can use regular container without any problems. ParticleContainer starts to show benefits at thousands of objects. Here's a screenshot of the profile (chrome profiler)
  43. 1 point
    Hi @maximlus, welcome to the forums Logins need two things: * A way to track logged-in status * A way to set logged-in status You can track logged-in status on either the client or on the server, but you almost always want to track _something_ on the client. The complication comes from identifying _who_ that client is, and that you can not trust clients. A common flow for a single-page application (your game probably is this) would be something like: * Hit your webpage holding your game * Navigate to log-in screen * Enter log in details (e.g. id/email, password) * Send those to your server. Check the details, if correct, generate a token, store it, send it to client. * Client stores this token (local storage is fine) and uses it to make subsequent requests or to actually enter the game. * Next visit, when client boots up (after hitting the url), check local storage for a token, maybe send it to your server to check it is still valid, become logged in. This flow means you have to store 3 things: * id/email and password details (server) * valid tokens (server) * logged-in status (client) Valid token status dictates logged-in status i.e. you should probably check the token is valid before assuming that it is. Tokens normally have two things: * An expiry * Are revocable An expiry means they will expire, you don't necessarily need to store this on the client, i.e. when the expiry date is hit then delete from server storage, when a client tries to use it, that operation will fail and you'll direct the user to a place where they can enter their details to generate a new one. This system also means that if you think anything is compromised (or problematic) then you can revoke a token. You could go a step further and associate a token with a user explicitly which gives you more control if you want to boot out a user, i.e. you revoke their token so they stop immediately, and you stop them from being able to generate a new one. It is normal to do this link between tokens are users, check out JWTs. If your game requires accessing authenticated endpoints (getting levels, scores, anything really) then using a token to do the auth stuff is quite nice i.e. your services _could_ inspect the token and respond appropriately for that user (or user type) i.e. to get the _next_ level, you wouldn't have to ask for it from the client (remember, don't trust clients), you could hold current level on the server and your endpoint could inspect the token, inspect the current level (and completion status maybe) and return the next level. There are lots of services out there that can handle these flows (and more complicated ones, such as 2FA) for you. It's worth looking up how they work and if they would work for you. Unless you want to code this all up and have to deal with holding emails or other personally identifying information (or even user tracking).
  44. 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.
  45. 1 point
    in mono

    Resize image = losing quality

    Try this: logo.smoothed = false; By the way, it doesn't matter which way you use to resize an image - scale changes the image's size and size changes its scale; they're internally tied to each other. DPI doesn't matter unless you print. If you're showing the image on a display, it's all pixels.
  46. 1 point
  47. 1 point
    brentstrandy

    Text Underline [SOLVED]

    I just finished extending the Phaser.Text object to add underline functionality. You can find the code here: https://github.com/brentstrandy/phaser-underline-text/blob/master/underlineText.js Any feedback would be appreciated!
  48. 1 point
    jerome

    UV values and solid particles.

    have a look at this commented PG : http://www.babylonjs-playground.com/#2FPT1A#89 maybe not that optimized, but didactic (I hope) : we use only one image file : Each box has 6 different sizes : this is done by setting the texture per side on the box model (we don't apply any texture to it). We just say each side will receive 1/6th of the image width on its width and the whole image height on its height (like we had only one row in the image file) Then at SPS initialization, each particle (one of three) is given the upper row of the image by the quad coordinates (0, 0.5, 1, 1) or the lower row (0,0, 1, 0.5). These values are the particle uvs property values. At last, in the render loop, randomly, we change sometimes the quad (lower and upper) associated to each particle according to its current state. Doing this operation to all the particles each frame is probably not a very good idea in terms of performances, but it's on didactic purposes. Anyway : 1 mesh, 1 texture, 1 draw call but hundreds or thousands of different solid particles. [EDIT] this one with 5000 boxes still run at 60 FPS in chrome here http://www.babylonjs-playground.com/#2FPT1A#90 5000 particles and a higher frequency of texture update : http://www.babylonjs-playground.com/#2FPT1A#91 still 60 FPS and just for fun, each frame texture update on each of the 5000 particles : http://www.babylonjs-playground.com/#2FPT1A#92 (60 fps also here)
  49. 1 point
    The Ticker documentation is here: http://pixijs.github.io/docs/PIXI.ticker.Ticker.html And here: (It makes reference to using PIXI.ticker.shared) http://pixijs.github.io/docs/PIXI.ticker.html Although, I tend to prefer to use the code as my documentation: http://pixijs.github.io/docs/core_ticker_Ticker.js.html Essentially, PIXI.ticker.shared is an instance of the PIXI.ticker.Ticker class. This instance is used by the Interaction Manager, although I'm trying to figure out why since it seems unnecessary (nobody has responded to my post yet). Of course, you are free to use the same instance, but keep in mind if you modify how it behaves, anything internal to PIXI that uses it may be affected. The PIXI Ticker is based on requestAnimationFrame, so in function, it is little different from running your render loop manually using requestAnimationFrame. But the object's event interface may be more attractive to use and look at since it involves less code. Beyond this basic function, it offers these features: 1) Usability: You can start and stop it easily. 2) Efficiency: It auto-starts (you can disable this) when there are listeners/callbacks, and auto-stops when there aren't any. 3) Throttling: The requestAnimationFrame callback is passed the current time as an argument. But the ticker callback is the number of frames that should have been rendered since the last call, depending on your target frames per second. By default, PIXI.CONST.TARGET_FPMS (target frames per millisecond) is set to 0.06, which means you are targeting 60 frames per second. In a perfect world, it would always say 1. But if the browser lagged really bad, it might say 60, if it has been a whole second since the last call. One possible use of this argument is to skip frames if it has a value >= 2. Or, let's say you have a sprite moving from A to B. It is supposed to move 2 points per frame, but the callback handed you 1.5 (which, if consistent, equals 40FPS). That means you can move the sprite 3 points this frame instead of 2 to maintain the desired speed. 4) Throttling: The number of frames passed to the callback can be capped to a maximum value. So to use the sprite movement example from #3, you can make sure the sprite doesn't jump too-large a distance in a single frame - even if the browser is lagging badly. 5) Throttling: The number of frames passed to the callback can be multiplied. So to use the sprite movement example from #3, you can increase (i.e. multiply by 2) or decrease (i.e. multiply by 0.5) animation speed. 6) Usability: You can add callbacks that should be called only once by the ticker as opposed to a constant loop. 7) Usability: You can add or remove multiple callbacks at will. All callbacks will be called in the same frame, so that multiple animations may be managed separately, but rendered in sync. requestAnimationFrame supports this also, but keeping track of those request IDs can be more painful. 8) Usability: You could just stop the ticker and trigger callbacks manually. For example, you could allow a user to stop the animations and present a button that allows them to step through frame-by-frame. In essence, you got a bunch of little features here that cater to creative situations, but aren't useful in many scenarios. But the idea of wrapping requestAnimationFrame into an object that may be manipulated carries with it a lot of potential. Feel free to ignore it or use it, depending on your situation.
  50. 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.