none
Drawing shapes RRS feed

  • Question

  • Hi Everyone,

    I am making a simple application that has a menu that scrolls down to the centre of the screen using Shapes.Animate().

    Now when creating a shape for the first time it always draws at the top left corner before having to place it somewhere with Shapes.Move().

    As I want it to appear scrolling from above the top of the screen what is the best way to get this effect without seeing the shape drawn at the top left corner?

    Thanks.




    • Edited by Kirkkaf Saturday, December 3, 2011 9:30 PM
    Saturday, December 3, 2011 9:29 PM

Answers

  • If you want an extension I added the functionality to Pause and Resume the GraphicsWindow display Updates and added it to the ShapesExtension (see sticky thread on Extensions for its download location of zip and full C# source etc or the zip is here).

    Test Code:

    GraphicsWindow.DrawEllipse(100,100,20,20)
    Program.Delay(100)
    
    ShapesExtension.PauseUpdates()
    GraphicsWindow.DrawEllipse(200,200,20,20)
    Program.Delay(100)
    
    GraphicsWindow.DrawEllipse(300,300,20,20)
    Program.Delay(100)
    
    a = Shapes.AddEllipse(20,20)
    Shapes.Animate(a,400,400,1000)
    Program.Delay(500)
    
    ShapesExtension.ResumeUpdates()
    
    


    As far as I can see, this then works without flicker:

     

    Sub OpenMenu
      ShapesExtension.PauseUpdates()
      GraphicsWindow.BrushColor = "Blue"
      MenuBackground = Shapes.AddRectangle(700, 500)
      Shapes.SetOpacity(MenuBackground, 0)
      Shapes.Move(MenuBackground, 50, -450)
      Shapes.SetOpacity(MenuBackground, 20)
      ShapesExtension.ResumeUpdates()
      Shapes.Animate(MenuBackground, 50, 50, 2000)
    EndSub
    • Edited by litdevModerator Sunday, December 4, 2011 6:17 PM
    • Marked as answer by Kirkkaf Monday, December 5, 2011 9:49 AM
    Sunday, December 4, 2011 5:50 PM
    Moderator
  • Or just do hole thing much nicer with animating opacity:

    DataExtension.Init()
    'window setup
    GameWindow.Show()
    GameWindow.Width = 800
    GameWindow.Height = 600
    GameWindow.Top = (Desktop.Height / 2) - 300
    GameWindow.Left = (Desktop.Width / 2) - 400
    GameWindow.CanResize = "false"
    GameWindow.Title = "Test"
    '-----------------------------------------------------------------------------
    
    'add menu
    GameWindow.BrushColor = "Blue"
    MenuBackground = GameControls.AddRectangle(50,-500,700, 500)
    GameControls.SetOpacity(MenuBackground,0)
    GameControls.Move(MenuBackground, 50, 50, "")
    
    MenuOpen = 0
    
    'main loops
    GameKeyboard.KeyDown = KeyDown
    '-----------------------------------------------------------------------------
    
    'main subs
    Sub KeyDown
      If GameKeyboard.LastKey = "Escape" Then
        If MenuOpen = 0 Then
          MenuOpen = 1
          OpenMenu()
        Else
          MenuOpen = 0
          CloseMenu()
        EndIf
      EndIf
    EndSub
    '-----------------------------------------------------------------------------
    Sub OpenMenu 
      GameControls.AnimateProperty(MenuBackground,"Opacity",100,1000)
    EndSub
    
    Sub CloseMenu 
      GameControls.AnimateProperty(MenuBackground,"Opacity",0,1000)
    EndSub
    

    • Marked as answer by Kirkkaf Monday, December 5, 2011 9:49 AM
    Sunday, December 4, 2011 6:11 PM

All replies

  • You cannot stop the initial draw in the corner - but most times it is hardly noticeable.

    You can create all the shapes at the start and move them off screen, just a Shapes.Move to some coordinates off the screen, like -1000,-1000.

    Simple example:

    gw = 600
    gh = 550
    GraphicsWindow.Width = gw
    GraphicsWindow.Height = gh
    For i = 1 To 10
      box = Shapes.AddRectangle(gw/2,20)
      Shapes.Move(box,gw/4,-20)
      Shapes.Animate(box,gw/4,gh-50*i-10,1000)
      Program.Delay(1000)
    EndFor


    Saturday, December 3, 2011 9:47 PM
    Moderator
  • Litdev,

    I was afraid that might be the case. In your example it's not so noticeable but mine is much more noticeable.

    'window setup
    GraphicsWindow.Width = 800
    GraphicsWindow.Height = 600
    GraphicsWindow.Top = (Desktop.Height / 2) - 300
    GraphicsWindow.Left = (Desktop.Width / 2) - 400
    GraphicsWindow.CanResize = "false"
    GraphicsWindow.Title = "Test"
    '-----------------------------------------------------------------------------
    
    'main loops
    GraphicsWindow.KeyDown = KeyDown
    '-----------------------------------------------------------------------------
    
    'main subs
    Sub KeyDown
      If GraphicsWindow.LastKey = "Escape" Then
        OpenMenu()
        EndIf
    EndSub
    '-----------------------------------------------------------------------------
    Sub OpenMenu
      GraphicsWindow.BrushColor = "Blue"
      MenuBackground = Shapes.AddRectangle(700, 500)
      Shapes.SetOpacity(MenuBackground, 0)
      Shapes.Move(MenuBackground, 50, -450)
      Shapes.SetOpacity(MenuBackground, 20)
      Shapes.Animate(MenuBackground, 50, 50, 2000)
    EndSub

      Thanks

    Saturday, December 3, 2011 10:33 PM
  • Only suggestions are:

    1] Do the move off screen immediately after creating the shape, in your case before changing opacity.

    2] Possibly an extension could be written to turn the GraphicsWindow redrawing update off (and on again) between such calls you could arrange everything without updates.

    3] If the shapes are large like yours, make them smaller so the initial display is less noticeable, then Zoom them once created and moved off screen.  Would require more work with the moving and animation since the coordinates are those of the unZoomed shape.

    Sunday, December 4, 2011 11:38 AM
    Moderator
  • Litdev,

    Thanks for all your suggestions, I am going to look into the 3rd suggestion I think that may work.

    Kirk.

    Sunday, December 4, 2011 1:15 PM
  • I have attempted to draw the image 20 times smaller when created and scale it 20 times, this still is very visible from the top left before it is removed.

    So it seems like the only way would be with an extension but having no experience with creating them, this will have to be put on hold for awhile.

    Unless.... shapes.SetOpacity() works with external images, I could use an image in stead of drawing the shape. 

    Kirk.

    Sunday, December 4, 2011 2:20 PM
  • If you want an extension I added the functionality to Pause and Resume the GraphicsWindow display Updates and added it to the ShapesExtension (see sticky thread on Extensions for its download location of zip and full C# source etc or the zip is here).

    Test Code:

    GraphicsWindow.DrawEllipse(100,100,20,20)
    Program.Delay(100)
    
    ShapesExtension.PauseUpdates()
    GraphicsWindow.DrawEllipse(200,200,20,20)
    Program.Delay(100)
    
    GraphicsWindow.DrawEllipse(300,300,20,20)
    Program.Delay(100)
    
    a = Shapes.AddEllipse(20,20)
    Shapes.Animate(a,400,400,1000)
    Program.Delay(500)
    
    ShapesExtension.ResumeUpdates()
    
    


    As far as I can see, this then works without flicker:

     

    Sub OpenMenu
      ShapesExtension.PauseUpdates()
      GraphicsWindow.BrushColor = "Blue"
      MenuBackground = Shapes.AddRectangle(700, 500)
      Shapes.SetOpacity(MenuBackground, 0)
      Shapes.Move(MenuBackground, 50, -450)
      Shapes.SetOpacity(MenuBackground, 20)
      ShapesExtension.ResumeUpdates()
      Shapes.Animate(MenuBackground, 50, 50, 2000)
    EndSub
    • Edited by litdevModerator Sunday, December 4, 2011 6:17 PM
    • Marked as answer by Kirkkaf Monday, December 5, 2011 9:49 AM
    Sunday, December 4, 2011 5:50 PM
    Moderator
  • Or just do hole thing much nicer with animating opacity:

    DataExtension.Init()
    'window setup
    GameWindow.Show()
    GameWindow.Width = 800
    GameWindow.Height = 600
    GameWindow.Top = (Desktop.Height / 2) - 300
    GameWindow.Left = (Desktop.Width / 2) - 400
    GameWindow.CanResize = "false"
    GameWindow.Title = "Test"
    '-----------------------------------------------------------------------------
    
    'add menu
    GameWindow.BrushColor = "Blue"
    MenuBackground = GameControls.AddRectangle(50,-500,700, 500)
    GameControls.SetOpacity(MenuBackground,0)
    GameControls.Move(MenuBackground, 50, 50, "")
    
    MenuOpen = 0
    
    'main loops
    GameKeyboard.KeyDown = KeyDown
    '-----------------------------------------------------------------------------
    
    'main subs
    Sub KeyDown
      If GameKeyboard.LastKey = "Escape" Then
        If MenuOpen = 0 Then
          MenuOpen = 1
          OpenMenu()
        Else
          MenuOpen = 0
          CloseMenu()
        EndIf
      EndIf
    EndSub
    '-----------------------------------------------------------------------------
    Sub OpenMenu 
      GameControls.AnimateProperty(MenuBackground,"Opacity",100,1000)
    EndSub
    
    Sub CloseMenu 
      GameControls.AnimateProperty(MenuBackground,"Opacity",0,1000)
    EndSub
    

    • Marked as answer by Kirkkaf Monday, December 5, 2011 9:49 AM
    Sunday, December 4, 2011 6:11 PM
  • Litdev,

    That extension is very useful, thanks for adding that feature. 

    Kirk.

     

    Monday, December 5, 2011 9:49 AM