Leaderboard


Popular Content

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

  1. 4 points
    Hey. Some info from us. Please note this is an info for a full catalog of our games (88 titles in total, 5 new games added in 2019). Browser Html5 games - we (team of 5) make a living out of it. Some licenses, some b2b deals, some ads. Facebook Instant Games - was super nice in 2018. In 2019 our reveue from games (old and new) is rather small. Still makes a little sense to publish new games there. Mobile games - zero. null. nada. Not a single dollar.
  2. 3 points
    8Observer8

    Javascript Courses!

    I like to learn by practice with writing simple games. Start here: 2D breakout game using pure JavaScript
  3. 3 points
    plicatibu

    Javascript Courses!

    I recommend you give a try here: https://javascript.info
  4. 3 points
    Stephan

    Is Panda 2 Dead?

    Hi all, I just wanted to let you know that Panda is still my primary game engine and I have no plans to abandon Panda. The absence of @enpu is unfortunate but don't forget that Panda is open source so most of the time, it is possible to fix minor issues yourself by having a look in the source code. Currently I have two large commercial projects powered by Panda and it is expected that these project will be running for at least several years. Don't forget that Panda by itself is a great engine and that it has a couple of features that not all other engines currently are supporting. Take hires support and the custom Panda GUI for example, these are just great! I will continue to read this forum on a regular basis. If there are questions that I can answer quickly, you can count on my support. Stephan
  5. 3 points
    dimanux

    Relic Runway

    RELIC RUNWAY Are you ready for crazy adventures? Run as far as you can, collect coins, upgrade useful bonuses, pick up parts of ancient relics, unlock amazing characters, and compete with your friends to be the best relic runner! LINK: https://gemioli.com/relicrunway/ MAIN FEATURES: Beautiful and dangerous Inka Ruins 10 brave heroes to unlock A lot of ancient relics to discover on your way Play with your Facebook friends And it's free for embedding on your website <iframe src="https://gemioli.com/relicrunway/" name="Relic Runway" width="640" height="480" frameborder="0" scrolling="no" allowfullscreen="true"></iframe> Please contact us at contact@gemioli.com if you have any questions, suggestions, etc.
  6. 3 points
    b10b

    Everything to create fb instant game

    I'll have a stab at these as I like to snapshot my view on things periodically ... Yes and yes. Pixi has a very decent power to size ratio and solid compatibility (v4.8 may be wisest in 2019?). For a competent developer capable of spinning their own game structure Pixi is ideal for a lightweight browser game. Coming in at less than 5MB total for your IG is wisest. Red tape aside, it's possible but improbable to make money releasing a single game. Primary monetisation choice with FB IG is in-game ads (which are a low value transaction for a developer and an intrusion to the player). In-game purchases have more value but will require significant retention first. Or consider indirect value generation such as consultancy services, brand building, learning for the next game? FB IG is inherently multiplayer (async). Within the SDK are context (group) leaderboards, notifications, packet sharing (challenges). That being said the vast majority of initial plays will be in solo mode, so a compelling single player experience is necessary for retention. Get creative for the crossover! For more advanced multiplayer use a custom backend. Having some separation / abstraction from the Facebook SDK might be wise in case other markets are a better fit for your game? For Multiplayer specifically? Yes there's a TicTacToe example that covers the basics of a client-server model. My advice is play some of the popular titles, understand what the FB IG audience seem to be attracted to and how other developers are leveraging the SDK to create retention and monetisation - warning, some of it can be ugly. Iterative development is going to be crucial, however you'll likely only be promoted once - so use it wisely, and use each territory to run a split test. Or build several games and apply the learning from one to the next etc. If you haven't built dozens of games already, FB IG probably isn't for you yet? Imo there are better platforms that can help evolve game development skills and player retention mechanics. Instead see FB IG as a specific audience with a specific style of game - developing a game precisely for that might work out very well (FB has a HUGE potential audience after all). Imo Messenger games should be about decorating a conversation, in the same way filters decorate a photo. So quick, contextual, personalised, fun, indisposable. That's not necessarily a standard casual game, so changing some assumptions and expectations may be wise. Just my advice, your mileage might vary!
  7. 3 points
    Greetings everyone! Check out our FREE asset packs at: rottingpixels.itch.io You can also follow us on social media and support us over Patreon! patreon.com/RottingPixels twitter.com/PixelsRotting rotting-pixels.tumblr.com facebook.com/Rotting-Pixels Cheers!
  8. 3 points
    enpu

    bugfix for Panda2 p2 plugin

    Yeah i'm still here! Just been a bit busy lately, but i am working on Panda 2!
  9. 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.
  10. 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.
  11. 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/
  12. 2 points
    b10b

    complex games with html5

    Unity exports to a WebAssembly and WebGL output, no "plugin" needed. But that's not to say it's ideal for web, especially not mobile web (search up Unity "Tiny" instead) Possible yes ... but consider this first ... Motion Twins' "Dead Cells" is authored with Heaps, a Haxe based game framework (which has Javascript WebGL output options). Also Motion Twins' catalog before this title was predominantly web games so they clearly have web capabilities. Therefore ... it's reasonable to conclude there's no all-blocking "technical" reason why there isn't a browser version, but there are likely many commercial or user-experience reasons why such a game isn't being published on web (yet). Same issues would likely apply / hinder any other similarly scoped game intended for web, irrespective of authoring tools? Conclusion, as always, is ** understand the audience ** ... on what platform do they want their game (big, complex, small, tiny) to be on. Or ... make web games that absolutely require, embrace and leverage the "web".
  13. 2 points
    @plicatibu Yes I am real, but I don't bring presents on Christmas.
  14. 2 points
    > ~100k Nodes/Edges Its not easy to join the club of 100k bunnies - you need your own high-level algorithms to work with pixi low-level smoothly. As an example - I'm working on complete implementation of Adobe Flash using PixiJS and mozilla shumway. My scope is ~500 vector elements with filters that can be cached and ~10000 animations played on GPU. `renderAdvanced` in PixiJS Container takes 50 lines, and its relatively sparse. Mine version of element renderer is about 2000 lines if I count all extra components I added for it. Its covered with hundreds of tests. Cache that tracks whether particular subtree wasnt changed is like React,except it can work on 60FPS and doesn't allocate memory like crazy. I implemented it based on all experience of Mozilla Shumway that was coded by~ ten people by 3 years and failed. Super-fast scene tree that doesn't iterate through all elements each frame to check if matrices has to be computed and which elements belong to which layer (z-indexing) - that's a huge problem. I made it using my algorithm expertise, which i trained in programming competitions. z-culling is another thing that is difficult architecturally, you can just take random gpu optimization and put it inside a scene tree. I don't know any other projects besides mine that use z-culling in 2d which seriously helps on old graphics cards like Intel HD 3000. There's also antialiasing for graphics - it doesn't exist in WebGL on RenderTextures, it exists only on WebGL2 and requires serious architectural changes to avoid huge memory consumption. I solved it due to undocumented feature that suddenly exists in all browsers, and I also implemented all that architectural nightmare on top of other optimizations - caches, filters, e.t.c. PixiJS version https://github.com/gameofbombs/pixi-blit/ will be released in a month or so, I focused on my private fork, cant share it yet. Interaction optimizations are based on bounds which based on super-fast scene tree. One step sideways and you'll have so many bugs that'll take year to debug. PixiJS bounds bugs exist after 8 years of coding. They are usual problem. I know how to make effective pixel-perfect interaction based on injection of mouse coords in shaders, but i dont know how to add something better like quad-tree without affecting code style badly, which, again, leads to big number of bugs. Now, you want 100k Graphics on scene with all those features, where Adobe Flash dealt with 10000. I think, with the scope you are asking, your project costs 1M$ Most of my work will be open-source, it will open doors for projects like you asking for, but right now you need to hire a team and spent more than a million $ on 2 or so years to get the product. > I guess what I am asking is, what are the communities recommendations when they need to show a large number of potentially interactive objects (Sprites/Graphics) on the screen at once? Write your own stage tree, its not that hard to just copy @pixi/display , @pixi/sprite , @pixi/graphics and pixi5-svg and go on. > but scaling to ~1M+ later on is not out of the question In your dreams. Ask https://phase.com/ how is their project going
  15. 2 points
    Hey ivan (thanks for your help) I thought i'd throw an update to this. I've sorted out a majority of the issues just some polish left. I've linked to a video to see the result of what i've been working on. Any thoughts? Suggestions? If anyone else has run into this issue, reply to this topic and i'll setup code examples. https://nyrion.ca/Cyndar.mp4
  16. 2 points
    danielmocanu

    Only HTML, CSS and JavaScript

    Hi, I found two games made only with HTML, JavaScript and CSS, no game engine. Here is the link: http://oldfashion-games.000webhostapp.com/ They can also be played on mobile phones.
  17. 2 points
    hum from individual test on Vivaldi browser (chromium) ~2sec test, ms per frames . (100% cpu usage for all!). It a fast test, if you guys can also take and shares same kind of screen plz. Hardware. Result link source code used: http://fatidol.com/phy-benchmark/
  18. 2 points
    if canvas is gpu-accelerated, you can see those operations in NVidia NView. Also, 5-6 years ago, people compared drawImage vs fillRect/pattern. I think that it also has to be different in case your sprite is axis-aligned or not, analytical antialiasing should affect those things.
  19. 2 points
    ivan.popelyshev

    bitwise operator not supported?

    Its a known issue, we have a preprocessor that adds "precision float " in the beginning , so please make sure you specify that line at the first symbol and not after "\n" That wont work: const frag = ` #version ... `; that'll work: const frag = `#version 300 es ... `; The place in source code: https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/shader/Program.js#L53 Yes, we cant decide what to do with that thing for several months already.
  20. 2 points
    ivan.popelyshev

    Need help with shader code

    https://www.pixiplayground.com/#/edit/s~VNyhMHDC32k41fJ4iD7 OK, so, vTextureCoord is normalized input, mouse is screen coord. We convert mouse to normalized input too. power is also converted to normlalized input, by dividing. If you want to get rid of division - pixi also gives 1.0/inputSize in its "zw" part. No way to put int constant there, have to use js interpolation. Its easy to fix aspect ratio there if you need, but, since original shadertoy source didnt have it, i dont want to add it for you. I'm depressed because my articles do nothing and people still ask me to do all the stuff for them.
  21. 2 points
    Extra info, what does mipmapping do: it scales down 2 times, then again 2 times, and obtains several "mip-levels" . then it samples the texture from levels depending on scale. Scale is determined through comparing "What coordinates of texture were asked in neighbour pixel shader". If we upload FAKE mipmap levels, we can see result like this: https://github.com/Busyrev/mipExploration , here we have curved space and its scaled in the center => mipmap is automatically switched there to next level (red), then next one (green) and so on. Manually scaling the texture and choosing sprite texture based on downscale also works! You have to use whatever you udnerstand and whatever is better for your case. Yes, it might be strange if you come from Web that now , in WebGL, you have to manage many other parameters: texture filtering, antialias, blendmodes, premultiplied alpha, gamma sRGB. Usually its managed automatically by browser, but that automatic managing can affect performance, and in WebGL world its significant, its all about performance. I'll have a talk in russian conference HolyJS about those things, I hope to translate it afterwards and use in other places too. I know that many people are smart enough to make their algorithms fast, but that kind of problems stop them just because they dont know specifics of WebGL switches and how big control they actually have, what responsobilities it raises.
  22. 2 points
    khleug35

    Ropes Game

    @AlienBurn recommend you try both and see which one suits you. For me Panda -Easy to learn, I have three games made with panda. -Very small community. -Panda Editor is not free but it can make you code your game faster(export to web or mobile is easy). -Growth So Slow, Engine has not updated for a long time, I worried that it like impact.js. Phaser -Much tutorial and Demo Example (but it left me quite confused after looking at multiple tutorials and even trying a few test projects.) -Very large community. -if you want to export to mobile and Code obfuscation, You need to learn cordova/phonegap , Webpack etc….it's totally free -Engine keep updated each month, fast-growing. Finally, Both of them are an awesome HTML5 engine.😁
  23. 2 points
    i was made this demo, maybe it will be more revelen with class https://www.pixiplayground.com/#/edit/WqMGLC7M3Fre3boCU1c1b
  24. 2 points
    Hello guys and basically this topic is for you guys/developers that upload games on gamedistribution so, I read too many topics with gamedistribution and all you guys/developers that you read all bad comments, "gamedistribution not pay me yet", "gamedistribution this, that" but you still continue upload to this website and support it? Serious? And the funny is, upload too many games to get in 1-3 or more months ........ What/How earning? 50euros? Or less? They own complete chain in advertising. So officially you get 1/3 of the income of a game. But they get often 2/3 because 1/3 for gamedistribution but also 1/3 since they own big game portals like Kizi. But also: You get 1/3 of the net income. But the ads are sold by their own advertising company so they can control different between Gross and Net. So they get up to 70% and you get 15% ............ if you are lucky! My experience to them? -> Of course. I get ~100euros in 6months from 10+ games... And when i remove all and i upload to other portal, i get ~200euros in 1 month from 2 games only. Imagine how % you get from your games. Even your game is addictive, even is top of the top....... You still lose a lot money. So you can continue upload your games, no problem. And open topics again or post to ask for help. Send them unlimited emails, will answer when they want. Cheers. By the way, @GameDistribution Support I'm still waiting "success stories" ? Can you share some original-success stories? Remember? I post under your post in this topic (June 18): P.S 1: Why open this topic ? -> One (1) only answer : To help new developers and their games. I learn from my mistakes. Bad experience with this company and similar. So i share true stories, that's all. P.S 2: How know and share all this ? -> This is personal sorry but thanks to a friend, he knows. P.S 3: Am i wrong? -> As i said, no problem, you can still continue upload your games. Your results from your earnings is the only truth.
  25. 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
  26. 2 points
    PIXIEDUST CATBOX

    Relic Runway

    This is an impressive game, and fun to play. Good job.
  27. 2 points
    That's nice using particles. Looks great. Using a shader would also be an option for water simulation.
  28. 2 points
    Welcome to the forums! Congratulations with hitting a problem that is not possible to solve through docs in your first question on this forums. However, PixiJS is not a black box, it has sources: https://github.com/pixijs/pixi.js/blob/dev/packages/mesh/src/Mesh.js#L275 OK, either you override _renderDefault, either make "update" function that'll pass calculated alpha to uniform. https://www.pixiplayground.com/#/edit/dCSAWarvEMdFqWip1BcuO const shader = PIXI.Shader.from(` precision mediump float; attribute vec2 aVertexPosition; uniform mat3 translationMatrix, projectionMatrix; void main() { gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); } `,` precision mediump float; uniform float alpha; void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0) * alpha; }`); shader.update = function() { shader.uniforms.alpha = shader.alpha; } btw, that code in _renderDefault is low-level pixi over webgl, you can add hack more stuff if you override it
  29. 2 points
    PunyGames

    Why did the forums move?

    I am not sure on Discourse policy of sharing data with 3rd party, but you can't really escape tracking. Most websites use Google Analytics. Your best bet is probably using Firefox with disabled tracking, using throwaway email for each service, (+ KeePass so you do not have to remember) and VPN.
  30. 2 points
    Usually its good to use "position" because it affects transform and not the shapes inside graphics. But in your case, you have to rebuild shape every time because UV's are changing, that means you have to change ONLY the shape, not the position. store position somewhere else, not in "position" field. this.brush.position.set(0, 0); this.brush.clear(); this.brush.beginTextureFill(this.resources.t2.texture); this.brush.drawCircle( event.data.global.x, event.data.global.y, this.currentWidth ); this.brush.endFill(); If you want to apply brush multiple times you can just drawCircle multiple points in it. I'm not saying that its best practice, but just if you understand how transforms and texture shift work (and they work like in a Adobe Flash), then this method is probably the best for the case. There's also "matrix" param in beginTextureFill that can help you . Of course when you experiment more, you can start using position + custom matrix inside beginTextureFill but at this point im afraid to suggest that, it will only confuse you.
  31. 2 points
    Velith

    SpineBoy Mouse Track

    Hi, It should be something like that : // 0. Listen which Pixi mouse event that you want (here PointerDown) stage.onPointerDown = (pixiEvent) => { // 1. Get the bone/constraint that you want to move using mouse const target = mySpineObject.skeleton.findBone("target"); // 2. Modify it's coordinate with the mouse event of pixi target.data.x = pixiEvent.data.global.x; target.data.y = pixiEvent.data.global.y; } Not test..
  32. 2 points
    Igor Georgiev

    Load all assets in a folder

    How about a script like this: var fs = require("fs"); var list = fs.readdirSync("game/static/assets/audio"); var dynamicAssets = "{\n \"paths\":\n ["; for (var i = 0; i < list.length; i++) { dynamicAssets += "\n \"/assets/audio/" + list[i] + "\","; } dynamicAssets = dynamicAssets.substr(0, dynamicAssets.length - 1) + "\n ]\n}"; fs.open('build/dynamicAssets.json', 'wx', (err, fd) => { if (err) { if (err.code === 'EEXIST') { console.log('dynamicAssets.json already exists'); return; } throw err; } fs.write(fd, dynamicAssets); }); and then you load them like this: let bootLoader = new PIXI.loaders.Loader(); bootLoader.add('dynamicAssets', 'dynamicAssets.json?version=' + version) let dynamicAssetPaths = this.app.bootLoader.resources.dynamicAssets.data.paths; for (let assetIdx=0; assetIdx < dynamicAssetPaths.length; assetIdx++) { let assetPath = dynamicAssetPaths[assetIdx]; let regExp = /([^\/\\&\?]+\.\w{3,4})/g; let assetName = regExp.exec(assetPath)[1]; PIXI.loader.add(assetName, "." + assetPath + "?version=" + version, {loadType:"XHR", xhrType:"blob"}); }
  33. 2 points
    Hey guys! I'm so excited to share this new game I've been making. It's a dungeon exploring & grinding with random dungeons and random items you can collect along the way! Play it now: https://mazmorra.io Screenshots:
  34. 2 points
    Thank you for your answers! I was thinking about creating a custom tools, but I figure this should be a fairly common issue so there had to be a solution out there I didn't know about that PS to Spine exporter, that looks really promising! I'll take a look at it! Thanks!
  35. 2 points
    Trump's Wall Game started out as a joke but somehow manifested into something that is...still a joke. It's a persistent world with one thousand nine hundred and sixty virtual miles along the border. Choose either the red team (builds wall) or the blue team (breaks the wall). Then go nuts and build or break away. Trump's Wall Game is a living breathing thing so any changes you make will be reflected for the rest of the world to see. Oh, we also hired a Trump impersonator to do the voices. That in itself is worth checking out. Enjoy! Play the game here: https://meowyorktimes.com/wall.html Game was created by a three man team in a few weeks. A designer (me), a developer and an artist.
  36. 2 points
    I wrote an article on this. Thoughts welcome! https://medium.com/@michelfariarj/scale-a-pixi-js-game-to-fit-the-screen-1a32f8730e9c
  37. 2 points
    Exca

    Redrawing only when needed?

    I have a method where I have two different changes that can happen in the scene. Tweens and handlers that get run every frame. For tweens I check if amount of active tweens creater than 0, then it means that something is changing. For onrender-handlers I have a custom component that allows for components to register themselves to get onrender -events and their return value will tell if something has updated. If either tween has updated or any of the components requires rendertime, then that frame is rendered. Otherwise no render will occur. In some cases this can be improved by splitting the scene into multiple canvases. One that gets updates rarely and one that holds the actual gameplay and is updated frequently. Though using that method is something that should be clearly thought out beforehand or you'll end up with multiple canvases to render each frame. Having render loop stop completely is something that you shouldn't do. As calling requestanimationframe is really cheap and not worth the trouble to build a mechanic with renderloop cancellation. Easier to just skip rendering on frames that dont need it.
  38. 2 points
    Does this help? https://www.pixiplayground.com/#/edit/sNKLacqLJenYpsQyc6mIp The issue you were struggling with is that Text is lazily updated. It only usally gets updated when it gets rendered; but you can force it to update with the updateText() function.
  39. 2 points
    Hello, I'm creating a front end for a graph display application. It displays a sort of fancy force directed graph, so there are nodes and lines. I'm using pixi-viewport to contain my main scene so it can be zoomed/panned/culled. Once you zoom in past a certain limit the nodes will start to display a text label across the center. I'm using PIXI.Text for these as I don't control what characters will be displayed. I want the text to look crisp so I'm willing to take the hit of generating new text textures on each zoom action. This isn't too expensive as you have to be so far zoomed into to activate the labels that there isn't to many of them on screen at one time. The problem I have is the the text is inside a container that has the hierarchy for a graph node, its shadow/outer selection, inner ring, icon etc so it inherits the world transform for scale and it causes the text to scale and then look bad. I don't want the text to scale as I regenerate it at a suitable text size each zoom to look perfect. I tried the naive solution of trying to apply an inverse 1/parent-scale which sort of works some of the time but not really. I tried putting the text on a layer above the viewport and manually positioning them and resizing them, this worked perfect till I dragged one node over another and realised z-indexing is broken now that they aren't drawn with the rest of their node display objects. Does anyone know if there is a way to stop the worldtransform from applying to a child/child container? I'm currently considering creating my own container subclass that somehow sets the world transform to identity and just position its local x,y at world co-ordinates inside the viewport, this container will be added into the node hierarchy and contain the text item. I'll need to browse through the code a bit to see how. But I'm not sure if it is possible, even a good idea, or complete madness.
  40. 2 points
    If you don't need gradients, there is this clever 3 sprites approach :
  41. 2 points
    We are working on full example for playable ads with hacks for pixi loader that allow to bundle everything including Spine models into one file . You can either wait 2-4 weeks or do it yourself.
  42. 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!
  43. 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.
  44. 2 points
    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.
  45. 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/
  46. 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.
  47. 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.
  48. 2 points
    I'll give you our personal experience of different ad networks: Google AdSense for Html5 games - you are right, they are in beta and it need approval from Google to be able to use the service. CPM is around $3. No problems with payment or anything. That's our only network atm. and I think it'll stay like that. Leadbolt - CPM was close to nothing (like $0.001). We were testing that few years ago, I don't know if it got any better. AppNext - we had pretty sweet CPM (around $6 - especially on iOS). It was working nicely until one day I got an email saying our account has been deleted because we supposedly violated the terms. No explanation was given as to what wrong we actually did. They took our monthly earnings (all good accordingly to the terms). I tried to contact them over email but they said they can't give me any additional information.