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.



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

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.