juliogomez7

Game with multiple sections

Recommended Posts

I'm just starting to learn PandaJS and I need to make a drawing game, where the top section has some controls to choose the type of figure, color, etc, and the bottom section is the drawing area (I attached a quick mockup)

I've implemented some interaction with Pixi Graphics to draw the figures but in this moment everything is mixed into a single section, and the drawing starts just where I click the button to choose a figure. I want to be able to click any control from the top section and then start drawing when I click the bottom section. I've tried with containers but I don't really understand them. Which is the best approach for this?

I'm currently using Panda 1.13. I will provide code if necessary.

 

Drawing.png

Share this post


Link to post
Share on other sites

Hi @juliogomez7

The way I would do it, is to make the drawing buttons like you said, and a canvas ( you can make this a white sprite to draw on ).

Here is an example ...

If 'pencil' button is selected and mouse is down, check if the mouse is touching the canvas sprite and only then enable the drawing :)

Hope this helps a little bit.

Share this post


Link to post
Share on other sites

Hi @Ninjadoodle, that approach worked, thanks!

Now I have sort of a more complex problem, I need to draw shapes like squares or circles in a way that the user sees what he is drawing. I'm doing this by clearing and drawing again the shape every time the mouse moves to a different point (I don't do this with the pencil mode), but I haven't be able to draw another shape without clearing the one that's already drawn. Also I need to keep track of the shapes I draw, because there are going to be undo and redo options. 

Should I create a new Graphics object for each shape or what else can I do? 

Here is a gist so you can see how I coded the drawing: https://gist.github.com/JulianBonilla7/39ab2e403cbd43f55617998f25e3d136

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.