SebastianMtl Posted May 12, 2020 Share Posted May 12, 2020 Hi, I'm new to pixi and I want to create a grid with line , but I'm not find any tutorial to make this. I'm working with JS and I need to make something a little interactive , Display a grid with squares in it and select them. I make a codepen ( with fabricJS ) of the result a want with Pixi https://codepen.io/sebastiancz/pen/dyYKXgN?editors=1001 Does someone here can help me ? Quote Link to comment Share on other sites More sharing options...
jonforum Posted May 12, 2020 Share Posted May 12, 2020 hi , this is how to make interactive in pixijs.https://pixijs.io/examples/#/interaction/interactivity.js You have a lot of way to perform this easily, you will just need practice and debug. I made you a demo here to help you to start. Click on grid and look how basic math work with normalised values.https://www.pixiplayground.com/#/edit/YV5hysTk8rU1DJh9qP67a Hope this can help you ! Quote Link to comment Share on other sites More sharing options...
SebastianMtl Posted May 13, 2020 Author Share Posted May 13, 2020 Thanks for this answer. I've made a codepen with pixi , but for interactivity I have a problem. I don't know how to change the color of the tile that I select. https://codepen.io/sebastiancz/pen/pojZxqP?editors=1111 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted May 13, 2020 Share Posted May 13, 2020 Make them all white and change their "tint" instead. Quote Link to comment Share on other sites More sharing options...
SebastianMtl Posted May 13, 2020 Author Share Posted May 13, 2020 (edited) I've change the alpha of the square thanks, I update my code pen. Is it possible to click and select multiple square ? I want to do something like on the picture. Edited May 13, 2020 by SebastianMtl Quote Link to comment Share on other sites More sharing options...
jonforum Posted May 13, 2020 Share Posted May 13, 2020 (edited) hum this will be more related to js and math algo. May add a key listener with key `shift` addEventListener("keydown"... than , if shift: true, make a mouse hover with push selected id in a global array. (a pool) When release shift, if you have things in your pool, make them selected. Edited May 13, 2020 by jonforum Quote Link to comment Share on other sites More sharing options...
SebastianMtl Posted May 13, 2020 Author Share Posted May 13, 2020 great thanks Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.