All Activity

This stream auto-updates     

  1. Today
  2. Looking for new projects Email ID:info.hephaestusent@gmail.com Skype ID: hephaestusent Feel free to contact us for your Art related queries. Thank you HEPHAESTUS ENTERTAINMENT 2D/3D Game & Animation service provider @ Indie price Contact Details: Email ID:info.hephaestusent@gmail.com Skype ID: hephaestusent Facebook: https://www.facebook.com/HephaestusEntertainmentarts/ More Art: https://www.artstation.com/artist/hephaestus_entertainment
  3. Hi, I would like to know the lowest value on my array. So i make var arr=[0,1,2,3] console.log(Math.min(...arr)) => 0 ok The problem is that my array contains this : var arr=[null,0,2] var min=Math.min(...arr) arr.indexOf(min) => -1 because it take null as lowest value...how to eject the null value ? How do you eject the null value from the Math.min() ?
  4. Hi Can you tell more about your game. something like concept genre and them I'm a Graphic and web designer maybe I can help
  5. More Art Works : Available for more art works! 2D Cartoon Art Work Game Assets Service : I can work on fixed price (based on my $14 per hour rate estimate), I do need a list of the assets to calculate. You can email me at oryzano@gmail.com for more details For Cost reference : Character Design : $7 - $28 (depend on details) +add $7 - $14 per animation (4 - 10 frames) (depend on details) Item $5 - $14 (depend on details) Background $14 - $56 (depend on details) Buttons $2 - $7 (depend on details) Etc. For a more accurate cost, give me a list, and I will calculate for a fix cost. If we have a deal, I will make some samples from the list to make sure you like the art style, if you approved then we move forward. etc. You can email me at oryzano@gmail.com for more details.
  6. Wolfsbane

    Menu Builder

    Hi greencoder, I'm not sure what you mean by a menu layout builder. Is there a similar example? Will the Essentials plugin help? It's got a lot of UI elements such as buttons, etc. https://www.panda2.io/plugins (find the Essentials one) Preview: https://www.panda2.io/plugins/essentials
  7. Yesterday
  8. Thanks, I really appreciate it! 🙂 I was busy shooting a film over the weekend, but I managed to do some mad experiments creating pixel art-style tiles. These were derived from glass surfaces, but might be used for other things as well. Free to use with attribution. Enjoy! https://soundimage.org/art-glass/
  9. You can either wait when someone like me or @eXponeta is available (~1 week), or you can read https://github.com/pixijs/pixi.js/wiki/v5-Creating-filters https://github.com/pixijs/pixi.js/wiki/v4-Creating-filters and look code in https://github.com/pixijs/pixi-filters
  10. I'm very new to shaders and trying to create a zoom blur effect on a container. I have one uniform 'center' where i just give it some coordinates. But this just gives me a black screen. I would love any help with this. I'm trying to convert the code from https://www.shadertoy.com/view/3slSRj Here's the shader code: precision mediump float; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform vec3 iResolution; uniform vec2 center; void main() { float focusPower = 10.0; const int focusDetail = 7; vec2 uv = vTextureCoord.xy / iResolution.xy; vec2 mousePos = center.xy / iResolution.xy; vec2 focus = uv - mousePos; vec4 outColor; outColor = vec4(0, 0, 0, 1); for (int i=0; i<focusDetail; i++) { float power = 1.0 - focusPower * (1.0/iResolution.x) * float(i); outColor.rgb += texture2D(uSampler, focus * power + mousePos).rgb; } outColor.rgb *= 1.0 / float(focusDetail); gl_FragColor = outColor; } Thanks in advance!
  11. Hey, New games available for licensing. More details here: https://odiusfly.com I'm available for freelance works too. Thanks in advance, Kyriakos
  12. 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.
  13. "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!
  14. 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 } }) })
  15. Here: https://pixijs.io/bunny-mark/ select tag or brunch and press "GO" near it.
  16. 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.
  17. 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.
  18. 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>
  19. 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>
  20. 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.
  21. 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!
  22. 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.
  23. Hi, please private message me your work rates. Thank You
  24. Last week
  25. 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();
  26. 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.
  1. Load more activity