Leaderboard


Popular Content

Showing content with the highest reputation since 03/13/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 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
  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
    Wolfsbane

    Link It Up!

    It's a nice little game! Don't think I've seen design quite like this before, so kudos for getting your own twist in a platform puzzler. The visuals are really nice. Got through till level 14. If you want feedback/critique, I'd just say I'm not sure about the controls. Mouse and then keys, and then space. I've got big hands, and game a little bit but my having to use arrows + space with one hand, and then mouse is a bit awkward. Generally this type of game you might aim for a casual audience(or even think about making it work on a smart phone). The simpler the control schema, the better.
  16. 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.
  17. 1 point
    Hello! The project is old so PIXI v.3.0.11 is used. For streaming - Flashphoner via WebRTC Steps to reproduce 1. Start video stream in html video element - stream.start(myDiv) which creates streamVideoElement in myDiv 2. When stream fires STREAM_PLAYING event the method PIXI.Texture.fromVideo(streamHtmlVideoElement) is called and the returned texture is set to the specific PIXI.Sprite instance. 3. Somewhere after this the Firefox browser receives error thrown by WebGl: Additional information The problem is happened very rerely Only Firefox Stream(video element) is not failed after the error In the PIXI source code that means: gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); What we tried tried to set video.crossOrigin = "anonymos" to the video element but no success. tried to dispose video like video.src = "" and etc according some advices related to the localStorage caching I know it's not directly linked by PIXI but still I need help. And the image of the current block when exception was thrown.
  18. 1 point
    That makes sense! Mad respect Ivan, you are always very helpful! 🤘
  19. 1 point
    setting width is actually changing scale. Unlike Flash, PixiJS doesnt have auto-scaled lines, lineWidth works in local coordinates, so vertical lines become very thin if your scale is small. If you have only a few bars (20 or so) you can just clear() them and refill again with the other drawRect width param. Judging by your labels that's the case
  20. 1 point
    ivan.popelyshev

    Pixi js editor

    i think that editor was for phaser2, and phaser2 was built on pixi so you can do something like that , even take some code. I can ask mightyfingers if they are ready to share their old work
  21. 1 point
    HTML5 is establishing itself as a language for everything. Nothing to do with HTML. Now we discover an open source platform that allows you to create 2D and 3D games. It is about Turbulenz. Tubulenz is a platform for creating games based on HTML5 that works mainly with Canvas, WebGL and JavaScript, its engine is very powerful or that is what it shows when using a game or any of the tests we can do with it (try), seeing as it generates complete 3D environments, controlling everything necessary in a video game to perfection (such as cameras, lights, shadows, particle generation...) and with an impeccable performance by the leading mobile game app development company. Using an engine like this one can be very useful, since it speeds up the development process, not to mention that browser games have a certain charm, being able to be played from anywhere without major complications. Well is another example of the growing importance of HTML5. Orient our training to master HTML5 I think it's a good choice.
  22. 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 .
  23. 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;
  24. 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.
  25. 1 point
    I suggest to make a demo at pixiplayground.com that way: create a renderTexture with resolution=2 , render something there, then render it on screen inside a sprite with big scale (x5 or so) , post it in https://github.com/pixijs/pixi.js/issues , that way we'll attract the rest of pixijs team.
  26. 1 point
    Marius

    Project MWX - multiplayer RPG

    it remembers me the old pc games. Nostalgia ❤️
  27. 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() })
  28. 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
  29. 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").
  30. 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.
  31. 1 point
    Hello, The methods I used are here: https://gist.github.com/Langerz82/d4d4291d7aa9d846ed64ab1bb27a9142 Apologies on the lack of documentation as I am still coding it. Basically each map object needs a array of the tiles it going to use. Then apply the right function to it. The first function supports erosion which removes the underlying tiles for optimization purposes. After the map is generated I simply loaded it in Phaser and bam new map. I'm going to use this code to support Retro RPG Online so it will have a massive amounts of maps. You still may need to tweak the map generator to get your desired results especially the avoiding placements of Objects with other layers. If anybody creates a working dungeon generator please share it, as that is the next thing I will be working on after I get some more resources put into the maps so they are more dynamic.
  32. 1 point
    Hi guys, I'm trying to draw a polygon/line from the coordinates of an svg path. I thought to use the path2d method, as it works correctly on native canvas, but I cannot make it work with pixi and couldn't fine anyone talking about it around. Something like this, but it's not working: let trackPath = new Path2D("M10 10 h 80 v 80 h -80 Z") graphic = new PIXI.Graphics() graphic.drawPolygon(trackPath) app.stage.addChild(graphic) Anyone?
  33. 1 point
    jonforum

    Fading trail

    I will interest by this later, because I remember that I will need to look this at it in depth. In fact I wanted to be able to generate texture guardian to apply this on a text box to generate a fadding mask text when scrolling the box. And the box are dynamic size, so i can not use photoshop in this context!, scaling the image will also scale the linear mask picture and give weird result. it's an old test with a filter for fake linear, but the subject is interesting. But am not energized to test it now . 😴
  34. 1 point
    I want to rotate player's both body and hands simultaneously but i couldn't figure out how to do it. My player looks like this and I want to be able to rotate it like this The body and hands are different sprites in a container, everything gets weird when I try to rotate (or move) the container. Player.js class Player { constructor(game, id, x, y) { this._game = game; this.container = new PIXI.Container(); this.body = new PIXI.Sprite( PIXI.Loader.shared.resources['assets/player-1.png'].texture ); this.body.x = x; this.body.y = y; this.body.anchor.x = 0.5; this.body.anchor.y = 0.5; this.hands = new PIXI.Sprite( PIXI.Loader.shared.resources['assets/player-1-hands.png'].texture ); this.hands.x = x; this.hands.y = y - 40; this.hands.anchor.x = 0.5; this.hands.anchor.y = 0.5; this.id = id; this.container.addChild(this.hands); this.container.addChild(this.body); this._game.camera.addChild(this.container); } updatePosition(x, y) { this.body.x = x; this.body.y = y; this.hands.x = x; this.hands.y = y - 40; } }
  35. 1 point
    You did something wrong, it should work. Wanna upload a demo on pixiplayground.com or codepen/jsfiddle?
  36. 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
  37. 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.
  38. 1 point
    Hello guys, I realize that my sprites were beautiful when I zoom in and quite ugly when I zoom out, so I decided to define two sprites to keep a good quality in zoom out or in: this._zoomOut[name] = new PIXI.Sprite(PIXI.Texture.fromImage(name,undefined,undefined,0.5)); this._zoomIn[name] = new PIXI.Sprite(PIXI.Texture.fromImage(name,undefined,undefined,1)); when I use this two lines of code separately it works well. But when I use both of them, the second call doesn't apply the 4th parameter "sourceScale". It means this._zoomIn[name] receives a sprite from a texture with 0.5 of sourceScale too. That's super weird, are there any cache to clear?
  39. 1 point
    I found out a solution from this website: https://medium.com/@benjamin.black/using-blob-from-svg-text-as-image-source-2a8947af7a8e const blob = new Blob([svgObject], {type: 'image/svg+xml'}); const url = URL.createObjectURL(blob); PIXI.Texture.fromImage(url,undefined,undefined,2); Unfortunately, when I zoom in now the quality is quite low do you have any idea which may provoke that? <svg version="1.0" id="blop_1" x="0px" y="0px" width="800px" height="800px" viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve"> <circle cx="400" cy="400" r="400" stroke="black" stroke-width="3" fill="red" /> </svg> Thank you for your helps EDIT: FIREFOX : doesn't display EDGE: no quality loss when zoom in CHROME: quality loss when zoom in it's quite strange
  40. 1 point
    Awesome work! I have been playing casino slots for a long time and this level of artwork and UI is at the top! Do you currently work for a team or this is a solo effort? Just hit 1.5 million coins in a bonus? How can I withdraw
  41. 1 point
    Impressive artwork! But I still can't make up what the actual game is. The trailer and screens show awesome stuff but it does not show how the game actually look likes. I think I saw like 3 very short recordings in barely 1.5 seconds that were projected on a 3d plane. My advice: replace the screenshots in this topic with actual straight-forward screenshots from the levels itself, not that store and lobby stuff. Those are rather irrelevant for they say nothing about the gameplay.
  42. 1 point
    ivan.popelyshev

    How to join Graphics and sprite

    drawCircle(0, 0, 50). What are your arguments to beginFill? Whats "0,0" ? shouldn't it be "0.0" ? Also, its black and that black will cover bunny. do you wan it to be behind bunny? Then you need additional container that will hold both sprite and graphics and you call that container "bunny" and move it.
  43. 1 point
    Jonny Shaw

    Freelancer | Digilocker Design

    Hi all! I've been floating around the forums for a few years now and didn't realise I hadn't posted a plug in here! 🤣 I'm Jonny Shaw, 35, & a freelance artist & designer, based in West Yorks, England. I have a background starting in UI design, but more recently have worked in 2D, 3D, animation, sculpting, & development too. Lately I've mainly been working on a lot of casino games, which also led into development with PixiJS, Spine & GSAP. The last of which ended up being a full game prototype (just minus the comms). Always on the lookout for interesting projects, so if you feel like my work may fit the bill, don't hesitate to give me a holla! Cheers 🍻 Jonny Shaw Website | Facebook | Behance | Artstation
  44. 1 point
    Hello! My name is Brian and I'm the Developer Community Manager with Legends of Learning. Legends of Learning is a EdGame platform looking for HTML5, Unity or Construct 2 developers to build 500 short (5-25 minute) Math games. Payout ranges from $1000 - $50000 per game depending on performance. To date, $4 Million has been paid and 1000+ games have been built. Sprint open now with slots on first come - first serve basis. Average of $4000 per game. Creative control left entirely to the developer! To learn more about the company and opportunity and to submit your information, navigate here: https://www.legendsoflearning.com/interested-game-developer/
  45. 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 }
  46. 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
  47. 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.
  48. 1 point
    Just to say that destroy is now working in Phaser 3 official release as follows: this.phaserGame.destroy(true); Thanks very much! This is going to be awesome. Teaching my kids phaser at the moment too!
  49. 1 point
    sable

    Propagating mousewheel event to parent?

    Hi there. Just did a similar test to Wingy, and looks like babylon doesn't block the events, http://www.babylonjs-playground.com/#C3ZPAS. Looking at your page source, I think the issue is that the scene is embedded in an iframe. You should be able to send the event (or a message) from the iframe to the parent either via window.parent or window.Postmessage
  50. 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.