Leaderboard


Popular Content

Showing content with the highest reputation since 09/20/20 in all areas

  1. 2 points
    Dr Popet

    Gostly Doors

    This is my new game, I made it to promote my new creative agency to make advergames in HTML5. Like my other games, this is a one button game, this one is ghosts theme and is very simple to play. http://c1ic.mx/GostlyDoors/ I hope you like it.
  2. 2 points
    britzl

    Discoverability & Monetization

    Like @end3r we (the Defold Foundation) were also awarded a grant from Grant for the Web to explore the use of Web Monetization in games. The Defold Foundation will use the grant to integrate, promote and support the use of Web Monetization in web games created using Defold. The Defold Foundation will integrate Web Monetization through its plugin system, promote it through examples and tutorials and host a game jam focused on Web Monetization. We have a first version the engine and editor integration ready for testing (more info). Next up is to create the sample game and start planning for the game jam.
  3. 1 point
    Oh wait, you want just stage scale, i've got it :)) Yeah, its better to copy it. I just dont have behaviour for that yet, sorry But i'll think about it. Its an interesting case, I didnt think about it
  4. 1 point
    Hello! I am trying to implement an array of various animations, some of which require shaders. I am working on an image transition in using a displacement shader from an empty texture -> image. The sprite is rotated when first added to the container. However, after I apply my shader, the sprite reverts to default rotation. I have asked a question on Stackoverflow, in order to not repeat myself I will post the link here: https://stackoverflow.com/questions/64175920/pixi-js-sprite-loses-rotation-after-applying-filter Thank you very much!
  5. 1 point
    Hi there! I'm new in Pixi, trying to make kinda concentration game. I implementing a game in Vue.js. I did first step of the game - the demonstration. It randomly shows some sprites on a grid. Sometimes demonstration complete successfully and sometimes - not. An error appear for some reason. Here an error Uncaught TypeError: Cannot set property 'texture' of undefined at VueComponent.playDemo (lamps.vue?d061:128) at TickerListener.eval (lamps.vue?d061:222) at TickerListener.emit (ticker.es.js?e3e9:132) at Ticker.update (ticker.es.js?e3e9:584) at Ticker._tick (ticker.es.js?e3e9:334) I also attach a video. Here the vue component with PIXI. It's messy I know, I just wanna know how things works for now <template> <canvas /> </template> <script> import * as PIXI from 'pixi.js' export default { name: 'LampsGame', data() { return { LEVEL: 3, ROWS: 4, COLS: 4, GAP: 5, SPRITE_WIDTH: 50, SPRITE_HEIGHT: 50, app: null, container: null, sprites: [], grayLampTexture: null, yellowLampTexture: null, demoElementShown: 0, demoCurrentElement: null, canShowDemo: true, currentDemoStep: 0, shownLamps: [], correctLamps: [], errorLamps: [], delta: 0, seconds: 0 } }, computed: { SEQUENCE() { return this.LEVEL + 1 }, ELEMENTS() { return this.ROWS * this.COLS }, demoSequence() { const list = [] while (list.length < this.SEQUENCE) { const random = this.getRandom(0, this.ELEMENTS) if (list.indexOf(random) === -1) { list.push(random) } } return list } }, mounted() { // Для работы PIXI dev tools в хроме PIXI.useDeprecated() window.__PIXI_INSPECTOR_GLOBAL_HOOK__ && window.__PIXI_INSPECTOR_GLOBAL_HOOK__.register({ PIXI: PIXI }) // ---- const canvas = document.querySelector('canvas') this.app = new PIXI.Application({ view: canvas, width: 400, height: 400, backgroundColor: 0x1099bb }) const gameContainer = document.querySelector('#gameContainer') gameContainer.appendChild(this.app.view) this.container = new PIXI.Container() this.container.sortableChildren = true // Move container to the center this.container.x = this.app.screen.width / 2 this.container.y = this.app.screen.height / 2 this.app.stage.addChild(this.container) // Loader const loader = PIXI.Loader.shared // Добавляем изображение в loader. Первый параметр - alias для ресурса loader.add('grayLampTexture', require('@/assets/games/lamps/state-1.png')) loader.add('yellowLampTexture', require('@/assets/games/lamps/state-2.png')) loader.add('greenLamp', require('@/assets/games/lamps/state-3.png')) loader.add('redLamp', require('@/assets/games/lamps/state-4.png')) loader.onProgress.add(this.handleLoadProgress) loader.onLoad.add(this.handleLoadAsset) loader.onError.add(this.handleLoadError) loader.onComplete.add(this.handleLoadComplete) loader.load() }, methods: { playDemo(delta) { this.seconds += (1 / 60) * delta const currentTime = Math.floor(this.seconds) // Last step if ( this.demoElementShown === this.demoSequence.length && currentTime >= this.currentDemoStep ) { this.demoCurrentElement.texture = this.grayLampTexture return } if ( this.canShowDemo && this.demoElementShown < this.demoSequence.length && this.currentDemoStep === 0 ) { //debugger this.canShowDemo = false this.currentDemoStep += 1 const spriteIndexToShowZ = this.demoSequence[this.currentDemoStep - 1] this.demoCurrentElement = this.sprites[spriteIndexToShowZ] this.demoCurrentElement.texture = this.yellowLampTexture this.demoElementShown += 1 } else if ( this.canShowDemo && this.demoElementShown < this.demoSequence.length && this.currentDemoStep === currentTime ) { //debugger this.demoCurrentElement.texture = this.grayLampTexture this.currentDemoStep += 1 this.demoElementShown += 1 const spriteIndexToShowX = this.demoSequence[this.currentDemoStep - 1] this.demoCurrentElement = this.sprites[spriteIndexToShowX] this.demoCurrentElement.texture = this.yellowLampTexture this.canShowDemo = true } else if ( currentTime > 0 && currentTime === this.currentDemoStep && this.demoElementShown < this.demoSequence.length ) { //debugger this.demoCurrentElement.texture = this.grayLampTexture this.currentDemoStep += 1 this.demoElementShown += 1 const spriteIndexToShowX = this.demoSequence[this.currentDemoStep - 1] this.demoCurrentElement = this.sprites[spriteIndexToShowX] this.demoCurrentElement.texture = this.yellowLampTexture this.canShowDemo = true } }, /** * Колбэк загрузки ресурсов * @param {object} loader - загрузчик * @returns {void} */ handleLoadProgress(loader) { console.log(loader.progress + '% loaded') }, /** * Колбэк загрузки ресурсов * @param {object} loader - загрузчик * @param {object} resource - загруженный ресурс * @returns {void} */ handleLoadAsset(loader, resource) { console.log('asset loaded ' + resource.name) }, /** * Колбэк загрузки ресурсов * @returns {void} */ handleLoadError() { console.error('load error') }, /** * Колбэк загрузки ресурсов * @param {object} loader - загрузчик * @returns {void} */ handleLoadComplete(loader) { console.log(loader + '----load complete') this.grayLampTexture = loader.resources.grayLampTexture.texture this.yellowLampTexture = loader.resources.yellowLampTexture.texture //const greenLamp = loader.resources.greenLamp.texture //const redLamp = loader.resources.redLamp.texture // Create a 5x5 grid of sprites for (let i = 0; i < this.ELEMENTS; i++) { const lampSprite = new PIXI.Sprite(this.grayLampTexture) lampSprite.width = this.SPRITE_WIDTH lampSprite.height = this.SPRITE_HEIGHT lampSprite.anchor.set(0.5) lampSprite.x = (i % this.ROWS) * (this.SPRITE_WIDTH + this.GAP) lampSprite.y = Math.floor(i / this.ROWS) * (this.SPRITE_HEIGHT + this.GAP) lampSprite.interactive = true lampSprite.buttonMode = true this.sprites.push(lampSprite) lampSprite.on('mousedown', () => this.onLampClick(lampSprite)) this.container.addChild(lampSprite) // Center lampSprite sprite in local container coordinates this.container.pivot.x = (this.container.width - this.SPRITE_WIDTH) / 2 this.container.pivot.y = (this.container.height - this.SPRITE_HEIGHT) / 2 } // Listen for animate update // Delta is the deltaTime. Could be usefull for smoth animation this.app.ticker.add(delta => { this.playDemo(delta) }) }, /** * Обработчик нажатия на элемент * @param {object} sprite - элемент * @returns {void} */ onLampClick(sprite) { //console.log('sdfg') //this.isdown = true //this.texture = textureButtonDown //sprite.zIndex = 100 sprite.texture = this.yellowLampTexture }, /** * Returns a random integer between min (inclusive) and max (inclusive). * The value is no lower than min (or the next integer greater than min * if min isn't an integer) and no greater than max (or the next integer * lower than max if max isn't an integer). * Using Math.round() will give you a non-uniform distribution! * @param {number} min - min value * @param {number} max - max value * @returns {number} */ getRandom(min, max) { min = Math.ceil(min) max = Math.floor(max) return Math.floor(Math.random() * (max - min + 1)) + min } } } </script> Will be very appreciated for help. pixi-error.mov
  6. 1 point
    If it works for you, i'll add it to pixi-projection myself, something as "POINT_X"
  7. 1 point
    For example, I took https://pixijs.io/examples/#/plugin-projection/quad-homo.js and added this. Now flowerTop guy scales with quad but doesnt actually rotate or move. You have to do the same with Matrix3d, just copy source from it and add extra "if". Dont use the source for my Matirx2d because it has different indices of matrix! const AFFINE = PIXI.projection.AFFINE; bunny.proj.affine = 123; PIXI.projection.Matrix2d.prototype.copyTo = function(matrix, affine, preserveOrientation) { const mat3 = this.mat3; const d = 1.0 / mat3[8]; const tx = mat3[6] * d, ty = mat3[7] * d; matrix.a = (mat3[0] - mat3[2] * tx) * d; matrix.b = (mat3[1] - mat3[2] * ty) * d; matrix.c = (mat3[3] - mat3[5] * tx) * d; matrix.d = (mat3[4] - mat3[5] * ty) * d; matrix.tx = tx; matrix.ty = ty; if (affine >= 2) { let D = matrix.a * matrix.d - matrix.b * matrix.c; if (!preserveOrientation) { D = Math.abs(D); } if (affine === AFFINE.POINT) { if (D > 0) { D = 1; } else D = -1; matrix.a = D; matrix.b = 0; matrix.c = 0; matrix.d = D; } else if (affine === AFFINE.AXIS_X) { D /= Math.sqrt(matrix.b * matrix.b + matrix.d * matrix.d); matrix.c = 0; matrix.d = D; } else if (affine === AFFINE.AXIS_Y) { D /= Math.sqrt(matrix.a * matrix.a + matrix.c * matrix.c); matrix.a = D; matrix.c = 0; } else if (affine === AFFINE.AXIS_XR) { matrix.a = matrix.d * D; matrix.c = -matrix.b * D; } else if (affine === 123) { let dist = Math.sqrt(matrix.a * matrix.a + matrix.c * matrix.c); matrix.a = dist; matrix.b = 0; matrix.c = 0; matrix.d = dist; } } return matrix; }
  8. 1 point
    Dr Popet

    Pinball toy

    I was playing with the physics inside TUMULT HYPE and I make a little PINBALL, by now is so simple, but is very entertained, I'll be adding more things. Like my other projects is a simple one button game, well toy because I didn't add more details by now (I'm working on them) But you can still play PLAY HERE
  9. 1 point
    Dr Popet

    Toggle Pong

    This time I wanted to make a PONG game, but using a single button and the solutions were so common, so I changed everything, not to control the paddle, but the ball and this is the result. http://c1ic.mx/toggle/
  10. 1 point
    PIXI.Projection problem Hello, I am battling with PIXI.Projection I want to get the Transform of one object and use its world transform to add it to another container with the same dimesions. Basically I want to copy the exact object and pasting it on the other container should then match. So all is fine if I get the worldTransform of one object, and prepend the world transformation of the container, then creating an object by decomposing into a Transform. Stack 1 is the object i am copying from let cont = new PIXI.projection.Container3d(); let cont1 = new PIXI.projection.Container3d(); cont.addChild(cont1); let stack1Obj = new TableGame.Widget.ChipStack({amount:10}); let stack1 =stack1Obj.view; stack1.y -= 200; cont1.addChild(stack1); cont1.scale.set(3); cont1.x = 0; tableCont.addChild(cont); cont.x = 500; cont.y = 800; cont.alpha = 0.5; let m = new PIXI.projection.Matrix3d(); stack1.worldTransform.copyTo(m); let wt = new PIXI.projection.Matrix3d(); tableCont.worldTransform.copyTo(wt); wt = wt.invert(); m.prepend(wt); let m2 = new PIXI.Matrix(); m.copyTo(m2); let t = new PIXI.Transform(); m2.decompose(t); let stack3Obj = new TableGame.Widget.ChipStack({amount: 10}); let stack3 = stack3Obj.view; stack3.setTransform(t.position.x, t.position.y, t.scale.x, t.scale.y, t.rotation, t.skew.x, t.skew.y, t.pivot.x, t.pivot.y); tableCont.addChild(stack3); This code all works above to create a replica of an object and copy it to the table container. The moment I add in a camera with a euler on the x, the above doesn't work anymore. let camera = new PIXI.projection.Camera3d(); camera.setPlanes(800, 10, 10000, false); // true if you want orthographics projection camera.position.set(gameWidth / 2, gameHeight / 2 - 200); camera.euler.x = Sys.MathUtils.degToRad(deg); // Works with this commented out //camera.position3d.z = 0; //camera.y = 220; camera.addChild(tableCont); I know it has do with the current camera not being taking into account with all the previous matrix calculations. Lines up, There are no real docs on PIXI.projection so I'm a bit stuck. With a camera and euler angle I get this: Can anyone help, or knows what else I need to do here.
  11. 1 point
    zeeb137

    how to draw textures faster?

    I need to draw textures pixel by pixel faster. I can make colors buffer and use it to create texture, but that's not fast enough for me! I can use fragmentshaders but they update every frame is there any other way to do it that takes advantage of OpenGL performance without updating everyframe?!
  12. 1 point
    Oh, do you want even more complicated? OK here it is. I have preloader, then there is a level select https://codesandbox.io/s/sad-forest-1m4r5
  13. 1 point
    Entaum

    The Sadlands

    That is very cool! Congrats
  14. 1 point
    Hi all, I want to show you a retro looking game made with JavaScript and only "type-in" sprites (all sprites are encoded inside the program source code) https://codeguppy.com/run.html?mars_attack/program If you are interested to see how this game was built, you can check this mini-tutorial that shows the game building process in 10 steps: https://codeguppy.com/code.html?t=mars_attack&list=games
  15. 1 point
    It looks like general application debug problem. Add if's for NULL's where you access "texture" field, place breakpoints inside those ifs, find why are you trying to call "null.texture". Also, beware of vue stuff that observes fields, or you'll have a problem like this: https://github.com/pixijs/pixi-spine/issues/358 Also, usually you can get faster help at russian-speaking html5 gamedev channels: https://t.me/gamedevforweb and https://t.me/webgl_ru
  16. 1 point
    seraphpl

    Draw on top of rendered bitmap

    Thanks, I'm able to do it now.
  17. 1 point
    Thanks Ivan for you answer again! I understand that you are very busy and that you don't have time. I would be very grateful if you could take a look at this post again on the weekend and help me understand better the excellent PIXI.js.
  18. 1 point
    Hi guys, I have just finished my first game! A simple Sudoku. Select difficulty from easy to expert. Play online at: onion.games/sudoku It should work equally well in mobile and desktop.
  19. 1 point
    Hello, I'm a web programmer with 3 years of experience (currently a senior developer). I've always been a fan of videogames and now I'm starting learning game development just for fun. Like in any type of development , you always face problems and learn of those. Sharing is the strongest tool to learn, you help other people to prevent/fix mistakes and they help you. What am I looking for?: People like me that is learning to develop games and want to meet other people to make games with them, share experiences, ask&answer questions. How will we organize? I have experience managing large Telegram groups and also creating bots for groups. It is a good starting point since most of the people always carry the phone everywhere and also has a web/desktop application, also Telegram offers us a direct communication without compromising your privacy (you don't need to give real info or phone number to the rest of the group). If we start growing, we can just move to another platform you want (Discord, Slack, whatever is of your preference). Do you have any project scheduled? Yes, I want to build a fun roguelike, here is my current roadmap of the game: I am an artist, can I join? Sure! I'm sure you can learn from us and we can learn from you, Keep in mind that sound artists, level designers, programmers.. work together and they need to understand all the other positions to work properly. Of course this is a flexible diagram, I don't do this as my job and I don't have any deadlines, creating a roadmap just helps me with organization so I don't start wrongly (which with end even worse :P). Have in mind that my only goal is just learning, I'm not in a rush to make money or finding a job Just feel free to contact me if you want to join or if you doesn't like something of my post.
  20. 1 point
    8Observer8

    HTML5 Multiplayer Games

    You can use a free hosting like Heroku or OpenShift
  21. 1 point
    ivan.popelyshev

    Where to store positional data

    You can make basic collision detection for pixi objects. XY and all transform is stored in "transform" field of display objects. ".position", ".x " , ".y" are just shortcuts. https://pixijs.io/examples/#/demos-advanced/collision-detection.js As soon as you want something more, you have to make your own Entity object, and copy coords from it regularly. That object can have link to its pixi facet and to its physics body, its up to you how to copy coords. Its necessary also because physics objects usually have different scale of coords, for example for p2 i use "-x/100, -y/100" to convert from pixels to physics
  22. 1 point
    dajve

    Where to store positional data

    Hi there, I thought I would try Pixi.js for a project, and noted early on that it primarily calls itself a "rendering engine". So my first step was to write the game logic using standard JS. Now the designer has supplied some assets and I'm implementing Pixi. So previously I had classes like this: item = { x: 10, y: 10, update(){ this.x += 1; }, render(){ ctx.fillRect(this.x, this.y, 10, 10); } } My question is, should I keep my logic in the class, something like: item = { x: 10, y: 10, sprite: new Sprite("asset.png"), update(){ this.x += 1; }, render(){ this.sprite.position.set(this.x, this.y); } } That way I still have access to item.x and item.y for hit tests and things like that. Or would it be a good plan to just ditch almost everything I have now, and just use the Pixi Sprite? item = { sprite: new Sprite("asset.png"), setup(){ this.sprite.position.set(10,10); }, update(){ this.sprite.x += 1; } } I'm a relatively seasoned dev, but have zero experience with Pixi. Simple collision detection is probably the only logic I need other than updating positions. What would you do?
  23. 1 point
    enriqueto

    Endless Siege

    Endless Siege is one of our latest games. You can play it on clashdome.io https://clashdome.io/endless-siege/
  24. 1 point
    Hutsune

    Internet Money the game

    @bbyford if you just use the teleport block every time it ends then attack at all other times you can’t be hurt
  25. 1 point
    during your loading phaze, you can do something like this, is how i load my fonts. is vanilla without libs, or you have some great libs on npm for less code. return new Promise((resolve, rej) => { const fontsList = [ new FontFace('ArchitectsDaughter', 'url(fonts/ArchitectsDaughter.ttf)', { style: 'normal', weight: 700 } ), new FontFace('zBirdyGame', 'url(fonts/zBirdyGame.ttf)',{ style: 'normal', weight: 700 }), new FontFace('Flux_Architect_Regular', 'url(fonts/Flux_Architect_Regular.ttf)',{ style: 'normal', weight: 700 }), new FontFace('ampersand', 'url(fonts/ampersand.ttf)',{ style: 'normal', weight: 700 }), new FontFace('ShadowsIntoLight', 'url(fonts/ShadowsIntoLight.ttf)',{ style: 'normal', weight: 700 }), ]; fontsList.forEach(fonts => { fonts.load().then(function(loadedFontFace) { document.fonts.add(loadedFontFace); //document.body.style.fontFamily = '"Junction Regular", Arial'; }); }); document.fonts.ready.then(()=>{ resolve() }); })
  26. 1 point
    Wardzr

    Leftovers after cleanup

    I don't use it at all
  27. 1 point
    When an image loads in Pixi, I assume it loads into memory as an HTML object and is copied into a WebGL (or other) texture buffer, meaning it uses 2x the memory of the image itself? A 2k image texture for example is 2048 x 2048 x 32-bit = 16MB. In a WebGL app, would this be 32MB of memory plus overhead? If so, is there a way to get Pixi to flush the source images from memory and just keep the WebGL buffers or does it need to retain the source images, for example, to generate buffers in different WebGL contexts?
  28. 1 point
    Here's a simple timelapse that shows how easily you can crate a fully functional webgl application using only Blender, Inkscape and Verge3D. Realtime of this video only 25 minutes.
  29. 1 point
    Well no I'm actually very happy with the global pixi loaders' cache. In my setup (using @react-pixi) pixi is set up and torn down multiple times (because components get unmounted etc). So it's very nice that the sprites are kept in cache. Perhaps I am alone in this but I think sprites loaded through a spritesheet atlas should get some sort of encapsulation, maybe just by prefixing with the atlas name or something.
  30. 1 point
    gomgom

    Pixelated SVG drawing rendering

    I had sprite.roundPixels set to true. Removing this improves my sprite rendering... I was expecting the exact opposite. Is this normal? Thanks.
  31. 1 point
    jonforum

    TexturePacker Multipacked Textures

    Hi, sorry but PIXI cant load multiPack from tp , but i asked Andreas Loew to add some meta to make this easier. So now you have 2 new meta named related_multi_packs and normal_map inside json to manage easier in PIXI. Check your version of Texture Packer pro, I can't remember what update where this added. here for you a example from my game loader core, it show you one way to manage and process multi-pack , normals, and animations. https://github.com/djmisterjon/ANFT/blob/e4002fab0428331fa5c5e844f1e9426a2795c5ec/js/game/global/loaders.js#L398 Sorry my example is very customised for my game engine and maybe not a good approche for you, i dont think you will can found a better free public demo code. Note this example is old and maybe have some weird code but it work. tips:look also for loader.pre https://pixijs.download/dev/docs/PIXI.Loader.html otherwise you would have to see with @xerver, (Autor) or @AndreasLoew , if they intends to implement a native multipack support in the PixiLoader with new metas from tp, but multi-pack remains a paid premium feature from tp. Sure , create a simple node programme to leech all your ressources files from a directory and build a register! no need to handwrite all your game resources ! Your will just need to have a good structures folders hierarchy. or use npm recursive-readdir https://www.npmjs.com/package/recursive-readdir
  32. 1 point
    Hi friends, I started working with these two companies at the same time, same games, same sdk. Both are very different and here I will tell you about my experience, I hope it will be useful to you as yours has served me. I uploaded to both platforms 2 games with more than 50 million players for a week, in Gamemonetize I am going to work a long time, in Gamedistribution today I closed the account and deleted my games. Contact: * In Gamemonetize is Katie, sweet, kind, decisive, quick to respond, my experience is unbeatable. * In Gamedistribution is Marco, it takes a long time to respond and the first few times I had to speak to his boss to make him do it, he is kind but tries to defend how indefensible his company's lousy service is. Distribution: * Gamemonetize spread my games through many small portals that cannot buy licenses nor have the platform for income distribution, it is exactly the public that needed to reach. * Gamedistribution did not spread my games anywhere, only their own games stand out. Profits: I cannot give the exact numbers for legal reasons but I will try to be very clear. * Gamemonetize: The two games in one week live generated around $ 10 a day, I want to clarify that the first day live gave a great boost exceeding $ 20, around $ 80 in total / week. * Gamedistribution: In approximately the same time the games generated $ 0.03 in total, between 0.00 and 0.01 a day between the two games. Games approval: * Gamemonetize: Almost immediately, a couple of hours. * Gamedistribution: Several days and I had to put a lot of pressure on the bosses, it is not enough just to send the game to the team that is in charge of it. I hope this works for you, any private question that you have is welcome
  33. 1 point
    https://github.com/pixijs/pixi-tilemap/issues/86 https://github.com/pixijs/pixi-tilemap/issues/82
  34. 1 point
    First of all, I'd like to say Hi for everyone as it is my first post here and also thank @ivan.popelyshev for great support on this forum! Back to the topic, I'm making an isometric game with build an island. I'm using my own ECS typescript engine and Pixi.js for renderering. Also for speeding up development i chose pixi-viewport as a camera and user interaction plugin. I read some info about isometric view but can't tell if one approach is better than the other for making it in pixi.js I observed the first one is the most popular, just scaling by half Y axis at the viewport container this.CoreEngine = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, resolution: 1, resizeTo: window, antialias: true }); this.Viewport = new Viewport({ screenWidth: window.innerWidth, screenHeight: window.innerHeight, worldWidth: 2000, worldHeight: 2000, interaction: this.CoreEngine.renderer.plugins.interaction, noTicker: true, ticker: this.CoreEngine.ticker }); this.Viewport.setTransform(0, 0, 1, 0.5); And then when making some sprites / graphics rotate them by 45deg. But the same result i can make doing Viewport transformation by creating custom matrix. this.CoreEngine = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, resolution: 1, resizeTo: window, antialias: true }); this.Viewport = new Viewport({ screenWidth: window.innerWidth, screenHeight: window.innerHeight, worldWidth: 2000, worldHeight: 2000, interaction: this.CoreEngine.renderer.plugins.interaction, noTicker: true, ticker: this.CoreEngine.ticker }); const Mat = new PIXI.Matrix(); Mat.rotate(Math.PI / 4).scale(1, 0.63); this.Viewport.transform.setFromMatrix(Mat); This way i dont need to rotate sprites and graphics because as i understand the whole system is changed from cartezian to somewhat izometric in the viewport container. With additional sprites it looks like this: My question is, which approach is preferred which one is more optimized? I can predict that Viewport functionality can be changed when i trasforming its matrix (camera can be crazy), so maybe i should do this on PIXI.stage instead of Viewport container?
  35. 1 point
    I just tested your game and it works much better now! I finished level 5 and had no trouble at all.
  36. 1 point
    Thank you! > My question is, which approach is preferred which one is more optimized? Same speed. There's no such thing as "PIXI.stage". Stage exists only for pixi-layers plugin in case you need special capabilities regarding layers. The real problem is number of tiles that you draw , and there are many tilemap-related discussions in this subforum. Personally, I favor y/=2 approach, the one you mentioned.
  37. 1 point
    "spritesheet.texture.frame" not "spritesheet.frame" Yes. I would do it and debug the result. In case you use trimming or rotations in spritesheet, try "texture.orig" instead of frame.
  38. 1 point
    Cool Game. I teach 1st grade and also make educational games. Graphics are good...and controls smoothly. Noticed some of the fonts look like the ones over at Flaming Text. I use some of those in my games too.
  39. 1 point
    Also, words "performance" and "optimization" usually are tied to "profiler" and "heapdump". You have to bump to a problem and identify it, before you figure out what code style is better for pixi.
  40. 1 point
    All props are fast. Usually its multi-lines calls of methods that are slow. > Can I read more about this subject somewhere? source-code. Unfortunately, our development process is faster than documenting.
  41. 1 point
    I have been payed by game monetize several times now.So i can confirm that they pay,and every time its been between the 25th and the 26th,that's much better than Gamedistributions "6 month delays"
  42. 1 point
    ivan.popelyshev

    graphics quality

    https://github.com/gameofbombs/pixi-blit/tree/master/examples build the plugin, host whole folder, open examples, debug wtf is going on there , try to figure out why i did this thing
  43. 1 point
    Dr Popet

    Arch Archer - Archery game

    Like all my games for c1ic.mx, this is a one button little archery game, trying too keep the look of the original TINY ARCADE games made in flash PLAY HERE ARCH ARCHER
  44. 1 point
    end3r

    js13kGames 2020

    The compo started yesterday - check out the blog post, and the short video announcing the theme. We have WebRTC added to the Server category, and continue having both WebXR (with Magic Leap 1 as the prize), and Web Monetization categories as well.
  45. 1 point
    Hello everyone, I think it would be great to share information about honest companies, which pay on time and such things, it would be good for us to understand that sharing that information will not take away sales, on the contrary, we have to be united to save ourselves work and problems, this is my experience, I hope you share yours: Income distribution: POKI: It is one of the best companies to work for, they are honest, there is direct contact with them all the time, they always pay and on time, they are friendly and responsible. I am happy to work with them CRAZYGAMES: It is an excellent company, they always pay on time, they are responsible and friendly, there is direct contact with them all the time, it was the first company I worked with in HTML5 and they taught me a lot, I will always be grateful and I recommend working with them. GOGY: My experience with them so far is very bad, terrible, they do not pay, they do not comply, I have been there for 6 months with my games and I have not received a dollar, I do not recommend working with them. Non-exclusive licenses: RHM (Twoplayergames): It is an incredible, honest and responsible company, I did a lot of business with them and they always comply, they are friendly, my experience with them is great, I love working with them, I recommend doing business with this company. LAGGED: Excellent company, they always comply, they are honest, kind and responsible, there is direct contact with them and I love working with them, I recommend doing business with this company. SILVERGAMES: I have a good experience with them, they are honest and kind, sometimes they take a while to respond to the messages but I like to work with them, sometimes you have to lower the price of the license but you have to take into account that they are a company small, I recommend this company. I hope this is the beginning of a collaboration between all, we have to be in solidarity with each other and help each other, I hope that everyone contributes their grain of sand, being selfish does not work in this business. Greetings to all Notice that English is not my native language and I apologize if there is any error in my writing, surely you will be able to understand me anyway.
  46. 1 point
    b10b

    Has Anyone Put their Games on Kaios?

    It looked interesting, we investigated late 2019, including conversations with KaiOS HQ, but chose not to proceed. At the time the only monetisation was in-game-ads, there was no indication of the eCPM (the territories are likely low value?), the KaiStore features were under-evolved (so discoverability would be a crap-shoot?), the hardware was bespoke requiring proprietary APIs and implementations for best effect, and HQ were unwilling to offset any risk - not even supply a $100 device. Unlike the underlying OS and telco proposition, the games business model was entirely unoriginal in its approach and failed to impress. In summary adding a game to KaiStore represented as much work as publishing to iOS, Android, or Facebook but without the apparent market benefits, and arguably at a higher cost (because we didn't already own a proprietary device). Our conclusion was it's best to rely on publishing partners to pursue emerging markets like KaiOS (rather than pursue them directly) - being FirefoxOS / HTML5 this is easy for them to achieve. Or just publish to web where anyone on any device or OS can play already! Things may have changed since, and your mileage may vary so I'd recommend keeping an open mind nontheless. Ultimately it depends on how you value your time and what alternatives you have available. Good luck!
  47. 1 point
    Very nice site. I love it! Thanks for you sharing!
  48. 1 point
    Enzo

    Runandrisk.io: My first io game

    I've been working in this game for a few months. The concept is something more or less new. Is like the Risk tabletop game but in real time. At this moment is in beta and I want to change some things of the rules. But is playable. Is for 3-4 players. Made with three.js and react-create-app basically. https://runandrisk.io/ Screenshot (Getting error uploading here)
  49. 1 point
    jdotr

    Phaser 3 nine slice plugin!

    Hey All! I needed to display some dialog boxes in a recent game and the old 9-slice plugin wasn't ported to v3 yet so I wrote one (github repo). I have a live demo here and a gif of it in use follows. Would love to see this get some use outside of my projects so give it a spin. I'm pretty active on the discord and try to check in here weekly so feel free to ping if you have any questions! Happy hacking!
  50. 1 point
    You can also use: camera.lowerRadiusLimitcamera.upperRadiusLimit