All Activity

This stream auto-updates     

  1. Past hour
  2. Hey, New games available for licensing. More details here: https://odiusfly.com I'm available for freelance works too. Thanks in advance, Kyriakos
  3. Hi, yes it's mobile, but you can customize it adding the keyboard events or an external joystick for desktop . The game pad I've used manage only the movement on the x and/or y axys, the fire button use a function.
  4. Today
  5. "position" is offset of whole graphics. graphics.drawCircle( Math.random() * app.renderer.width, Math.random() * app.renderer.height, 10, ) that's in local coords. If you draw circle in (50. 100) and your position is (10, 10) then circle will be at (60, 110). How to deal with that after the fact that you filled graphics with something? Well, you can take getLocalBounds(), calculate center of the thing and then subtract it from position. Usually people solve it differently: put coords in position, not in circle center. Welcome to the forums!
  6. Hello, I want to set the absolute position of a graphic to 0, if goes out of bounds. However, after a few hours I was not able to do this. This is my code: import * as PIXI from 'pixi.js' const app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, antialias: true, view: document.querySelector('#canvas'), }) const container = new PIXI.Container() app.stage.addChild(container) let graphics = new PIXI.Graphics() for (let i = 0; i <= 0; i++) { graphics.beginFill(0xFFFFFF) graphics.drawCircle( Math.random() * app.renderer.width, Math.random() * app.renderer.height, 10, ) graphics.endFill() } container.addChild(graphics) app.ticker.add((delta) => { container.children.forEach((circle) => { circle.x += 10 * delta if (circle.x >= app.renderer.width) { circle.x = 0 } }) })
  7. Here: https://pixijs.io/bunny-mark/ select tag or brunch and press "GO" near it.
  8. I can't seem to find it, but thought it did a good job of showcasing Pixi's capabilities and speed and wished to show it to someone. It had those bunny sprites used in the documentation but you could just keep dumping more in and they'd bounce around the container and it was lag free. I know it's not a typical question but spend 30 mins looking for it so thought maybe one of you guys had it bookmarked.
  9. greencoder

    Menu Builder

    Is a menu layout builder available for Panda 2? Or is there an external tool I could use maybe get an json file or something and import it to Panda 2? Appreciate any help on that front. I would like to have tool for quick iterations rather than hardcoding it. For context, I am designing a UI based management game and am planning to use Panda 2 for instant games.
  10. Final example in WebGL 1.0 and JavaScript. Textured Rectangle: https://jsfiddle.net/zjydm1ev/ You need run it from local server. I use http-server. Install it using the command: npm i http-server -g And run it in place where the index.html file is: http-server index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 1.0. Applying a texture to a square</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #aaaaaa; } </style> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = ` attribute vec2 a_Position; attribute vec2 a_TexCoord; uniform mat4 u_ModelMatrix; varying vec2 v_TexCoord; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); v_TexCoord = a_TexCoord; }`; var fragmentShaderSource = ` precision mediump float; uniform sampler2D u_Sampler; varying vec2 v_TexCoord; void main() { gl_FragColor = texture2D(u_Sampler, v_TexCoord); }`; var gl = document.getElementById("renderCanvas").getContext("webgl"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var verticesAndTexCoords = new Float32Array([ -0.5, 0.5, 0.0, 1.0, // (x, y), (u, v) -0.5, -0.5, 0.0, 0.0, 0.5, 0.5, 1.0, 1.0, 0.5, -0.5, 1.0, 0.0 ]); var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, verticesAndTexCoords, gl.STATIC_DRAW); var FSIZE = verticesAndTexCoords.BYTES_PER_ELEMENT; var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 4 * FSIZE, 0); gl.enableVertexAttribArray(a_Position); var a_TexCoord = gl.getAttribLocation(program, "a_TexCoord"); gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, 4 * FSIZE, 2 * FSIZE); gl.enableVertexAttribArray(a_TexCoord); var image = new Image(); image.onload = function () { gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); gl.activeTexture(gl.TEXTURE0); var texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image); var u_Sampler = gl.getUniformLocation(program, "u_Sampler"); gl.uniform1i(u_Sampler, 0); var modelMatrix = mat4.create(); mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(1.5, 1.5, 1.5)); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clearColor(0.898, 0.984, 0.905, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); } image.crossOrigin = ""; image.src = 'https://dl.dropboxusercontent.com/s/xi091ya34qqzda2/lightblueflower.jpg'; </script> </body> </html>
  11. I want to find challenges for practice with WebGL features. If we know how to draw and move a rectangle we can write a lot of simple games like: breakout, snake, tetris and so on. I use the glMatrix library for linear algebra. Colored Rectangle with translation: https://jsfiddle.net/8Observer8/t2q4rmnm/ Just save it in the index.html file and run in browser. It is JavaScript ES5: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 1.0. Translate a square using glMatrix</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #aaaaaa; } </style> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = `attribute vec2 a_Position; uniform mat4 u_ModelMatrix; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); }`; var fragmentShaderSource = `precision mediump float; uniform vec3 u_Color; void main() { gl_FragColor = vec4(u_Color, 1.0); }`; var gl = document.getElementById("renderCanvas").getContext("webgl"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 ]); var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); var u_Color = gl.getUniformLocation(program, "u_Color"); gl.uniform3f(u_Color, 0.635, 0.450, 0.125); var modelMatrix = mat4.create(); mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0.3, 0.3, 0.0)); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clearColor(0.898, 0.984, 0.905, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); </script> </body> </html>
  12. Yeah I noticed that. The icon didn't quite give away what it was at first glance, but the arrows gave me a hint to move around the screen after toggling it to discover what it did, and it's a super useful addition. Tick and cross arrows to place down might need to be made a bit more noticable? But it's a big step up from where it was for mobile usage. And something easy to explain to users in a tutorial.
  13. Its good that you went to the source, you already know that all those things are done through readPixels. This operation is synchronous, it waits for data from GPU. Try not to call it more than once per frame. webgl readPixels is wrapped by in WebGLExtract class, instance exists in "renderer.extract", find it in docs. I recommend to do "renderer.extract.pixels(x,y,1,1)" just after rendering is done in your gameloop. Gameloop explanation is here: https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop Basically you need a handler with even lower priority than "render". If you call it in mouse event - there's no guarantee that you'll get that info. Another approach is to render your scene in renderTexture, then you can call extract any time. However, dont just use "extract.pixels(myContainer)" because that will try to render whole container no matter how big its bounds are. You can look inside that code, its actually using "renderer.generateTexture()" - if you copy it you can supply your region in that method. Extract plugin has no magic, except flipY and post-divide, you can do all those things manually if it turns out pixi implementation is not good for your task. If you want to make pixel-perfect interaction, it can be done without extract/readPixels, see https://github.com/pixijs/pixi.js/wiki/v5-Hacks#pixel-perfect-interaction , maybe parts of that code can help you too. Welcome to the forums!
  14. Hello, Currently I am working on a map application which can let the users to interactive with huge amount of entities including points and polygons. I use leaflet map framework and a library called PixiOverlay to achieve that. The data are stored in particleContainer and also indexed by kd-tree. Therefore, we can select entities on the map by searching the coordinates of a click event in the tree. Now I want to implement an onHover function that changes the appearance of cursor when the mouse pointer hovers on the entities. Soon I noticed that continually search in the tree takes too much time when the amount of entities is huge. Although I am new to WebGL, I still tried hard to google for potential solutions. I found there is a color picking algorithm which includes the step "Read the pixel at location (mouse_x,mouse_y) from the color buffer which identifies the object." Is it also possible to read the color of a pixel directly in pixi.js? Thanks.
  15. Hi, please private message me your work rates. Thank You
  16. Yesterday
  17. I am not beginner but I know how to make it more hard for me. I will write Unit Tests using Jasmine Framework. I study TDD and this challenge is useful for me. I use TypeScript. 1. Print numbers from 1 to 10. We expect that the array with numbers [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] will be generated. I wrote this unit test first. It is TDD in action. Playground: https://next.plnkr.co/edit/NJHyFVGFXJjCaZSV?preview KataTests.ts import Kata from "../../src/client/Kata"; describe("KataTests", () => { it("GetNumbersFrom1to10_ReturnsNumbersfrom1to10", () => { // Arrange let expectedArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // Act let actualArray = Kata.GetNumbersFrom1To10(); // Assert expect(actualArray).toEqual(expectedArray); }); }); Kata.ts export default class Kata { public static GetNumbersFrom1To10(): number[] { return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; } } Program.ts import Kata from "./Kata"; import Output from "./Output"; class Program { public static Main(): void { // Get array let resultArray = Kata.GetNumbersFrom1To10(); // Print array resultArray.forEach((element) => { Output.Instance.Print(element.toString()); }); } } // Debug Version Program.Main(); // Release Version // window.onload = () => Program.Main();
  18. Suggestion: include an exe in the github releases. I understand you feel strongly about the subject and thank you for a free tool. Similarly I think TexturePacker serves a particular audience well, and it's perfectly ok to expect compensation / payment when value is delivered.
  19. yes you can use and you will started earning, until Facebook find out and account will be banned
  20. hi thanks, i got it working .... is there a way to prevent game form closing and update the game status real-time
  21. Ah thanks mate, really appreciate those spots! Added to the list. I think also the oddness might be explained by the control scheme I've setup but not explained for tablet/phone. I've got a button that makes it a bit easier to use the tools. I've put this together for everyone who' s testing but I'll have to get something in game soon.
  22. Understood mate, I also use *just* pixi for my project (I didn't see the point in going any further than having a rendering engine). I do hope others can provide you with experienced answers but I figure I would also provide more from my perspective. Making a game or any project from scratch without frameworks can come with loads of benefits (since we already know the downsides i'll describe just a few of the upsides) 1. Performance.. You pick exactly how your engine processes its logic. (This is why I only use a rendering engine and not a game framework) 2. Learning... You get to learn loads about making a framework or engine yourself (Before Pixi 1.0 and even the early days of popularised HTML5 games, I did a bunch of learning and made this video at end of the post) 3. Cost... Maybe the framework that does suit you costs too much, e.g. dev tooling, licenses etc. 4. Fit for purpose... Sometimes you have an idea for a project, which no framework lends itself to well. For example, you may need to run inside Linux, Unix, iOS, Android, PS4 web browser, XBOX web browser. You may want Newtonian physics, you may want it to import SVG's, you may want it to use CSS etc. 5. Complete control... This one is normally the reason used by the best developers, AAA's/AA's, financial institutes, military, etc. You have created and built every single aspect and component of your project, because it's extremely important you know exactly what every single component does. The video I put together years ago about trying out gaming aspects in HTML5 Hope this helps give you some perspective you may have not considered. Jam.
  23. Despite the fact that I like doing it for fun, I couldn't agree more with you @Jammy, If you intend to deliver good quality products and have less headaches along the way, Phaser/Pixi+howler in my opinion are way to go. Maybe it's just me being finicky, but I'm still interested in learning from whoever went against the stream and know their reasons to do it. (I'm using Pixi for my current game btw)
  24. Hello my friends, I have been gone for quite a long time because of those bastards at codeandweb.com making people pay for their stupid texture atlas program with a dumb gui. However, I have decided that I am not going to take it anymore. That is why I have created Rat Pack Texture Atlas Creator 100% for free. I would like to see the look on the face of the greedy red handed theiving bastards at codeandweb.com right now. Yep, 100% FOR FREE. I feel a bit bad for codeandweb.com, it must feel sad seeing your last slave be emancipated, leaving you all alone. AND no stupid gui, Rat Pack is for commandline only, so you can use it as quickly and easily as possible. you will not need to wait for a program to load up, just type whenever you update your sprites and it will all be there waiting for you with no messing about. TOUCH THE POWER NOW. VISIT https://github.com/dalygbarron/rat
  25. So just tried on my tablet, and I'm able to select built items fine. Odd (but good!). Couple more issues... 1. All the menus look fine in portrait apart from the upgrades menu, which doesn't show the X in portrait mode, so can't click off of it. 2. If I use the pinch action to zoom in as much as I can, I can then press the zoom icon to zoom further into a black void. Scary.
  26. My dream is to make the Battle City game with multiplayer. I will take textures, tiles and some rules from the original games but I need to create right rules for a few teams and coop mode. I think it will be a good practice.
  1. Load more activity