How to Create Animation with Small Basic RRS feed

  • General discussion

  • Latest "Anime"

    Related tools

    Top article

    This article is a dropping out from Shapes Editor.  Shapes Editor can create a picture as an "Group" of shapes.  The purpose of Shapes and the "Group" is to animate them.  So, the next step is to create animation.  I'd like to write story of making "Anime" here.

    Nonki Takahashi

    Friday, May 24, 2013 1:28 PM

All replies

  •   Nice Nonki

    May I translate to spanish, and publish it in my blog with your trade mark ?

    Best wishes

    carlosfmur - Buenos Aires

    Friday, May 24, 2013 10:05 PM
  • Thanks, Carlosfmur.

    Yes, please.

    Nonki Takahashi

    Saturday, May 25, 2013 11:14 PM

      Many thanks to you, Nonki

    carlosfmur - Buenos Aires

    Sunday, May 26, 2013 1:13 PM
  • At first I'd like to introduce my animation program RQB683-1.  I already introduced this program in the thread of Shapes Editor.  But this program doesn't work properly in browser.

    So, my first challenge is to rewrite this program for proper work also in browser.

    Nonki Takahashi

    Saturday, June 15, 2013 12:10 PM
  • RQB683-3 is a new output of newest Shapes editor 1.5b.  Shapes 1.5b itself cannot run in remote properly, but the output can run in remote properly.

    Nonki Takahashi

    Saturday, July 27, 2013 2:37 PM
  • I was attempting to create animation with shape array.  And I wrote some.  But this way is not simple.  We can create simpler code with Shapes.AddImage().  So I'd like to shift to use image for Small Basic animation.  Actually, I wrote some games using images for their animations.  For example:

    • DONKEY KONG in the Small Basic World 0.91 (FGM769-8)
     is the sample.  For this game, original images are created with Shapes editor.  And converted to png files.

    Nonki Takahashi

    Sunday, July 13, 2014 3:50 AM
  • Today, I published Shapes 1.7b (XFZ657-16) and a sample output Rocket 0.52 (RQB683-4).

    In this version, I added [Grid] menu.  And changed the window size from 640 x 480 to 598 x 428.

    Screen shot of a program Shapes 1.7b


    Nonki Takahashi

    Sunday, October 12, 2014 8:35 AM
  • Current data format of Shapes editor is a Small Basic program including shapes array.  But, I'd like to change this format to more compatible one.  Now I'm very interested in SVG (Scalable Vector Graphics).

    In addition, SMIL (Synchronized Multimedia Integration Language) is a standard to describe animation with SVG.  So, SMIL specification will be a good sample to implement "Anime" in Small Basic, I think.

    Nonki Takahashi

    Thursday, October 30, 2014 5:10 AM
  • I made a sample viewer for SVG.

    [Import] HFT825, remove single quotation marks from lines with File object and [Run].

    Screen shot of a program Small SVG Viewer (pilot)

    Nonki Takahashi

    Monday, November 24, 2014 2:23 AM
  • I started to rewrite from Shapes editor to Small SVG Editor.  First special beta version is Small SVG Editor 1.85b. I published it as TLW744-4.  And uploaded full source code to GitHub.  This beta version is special because Open function is still old specification of Shapes editor.  So this version can open old Shapes graphics and convert and save as SVG format.

    Screen shot of a program Small SVG Editor 1.85b

    And following sample SVG is the output of this program.

    <svg width="598" height="428">
      <ellipse cx="323" cy="521" rx="28" ry="73" 
      <ellipse cx="324" cy="507" rx="18" ry="51" 
      <ellipse cx="324" cy="486" rx="9" ry="25" 
      <ellipse cx="323" cy="511" rx="28" ry="73" 
      <ellipse cx="324" cy="497" rx="18" ry="51" 
      <ellipse cx="324" cy="476" rx="9" ry="25" 
      <polygon points="322,150 252,246 392,246" 
      <polygon points="251,344 230,422 272,422" 
      <polygon points="392,343 372,423 413,423" 
      <polygon points="323,339 282,409 364,409" 
      <rect x="252" y="247" width="141" height="142" 
      <polygon points="323,342 303,423 344,423" 
      <ellipse cx="323" cy="295" rx="41" ry="43" 
      <ellipse cx="323" cy="295" rx="33" ry="34" 
      <ellipse cx="267" cy="370" rx="7" ry="8" 
      <ellipse cx="294" cy="371" rx="7" ry="7" 
      <ellipse cx="352" cy="371" rx="6" ry="7" 
      <ellipse cx="376" cy="370" rx="5" ry="6" 
      <ellipse cx="323" cy="501" rx="28" ry="73" 
      <ellipse cx="324" cy="487" rx="18" ry="51" 
      <ellipse cx="324" cy="466" rx="9" ry="25" 

    Nonki Takahashi

    Wednesday, November 26, 2014 12:14 PM
  • Here is a latest Small SVG Editor 1.97b.

    Screen shot of a program Small SVG Editor 1.97b

    Nonki Takahashi

    Monday, December 22, 2014 8:34 AM
  • I uploaded latest Small SVG Editor 1.98b to CodePlex.

    Screen shot of a program Small SVG Editor 1.98b

    Nonki Takahashi

    Sunday, January 4, 2015 4:56 AM
  • I uploaded latest version (2.02b) of Shapes editor to CodePlex.

    This version can read/write both .sb (.smallbasic) and .svg file formats.  You can switch the format to input file extensions (.sb or .svg) in Open and Save dialog boxes.

    Screen shot of a program Shapes 2.02b

    Nonki Takahashi

    Friday, January 9, 2015 8:55 AM
  • I uploaded Shapes 2.1b to CodePlex.

    This version supports [New] command (push Ctrl+C key).

    Screen shot of a program Shapes 2.1b

    Nonki Takahashi

    Thursday, February 5, 2015 3:03 AM
  • Anime project has been started in CodePlex.  But, CodePlex will be shutdown on December 15, 2017.  So, I just moved my Anime project from CodePlex to GitHub.

    Current version of Anime is 0.3a.  It just shows it's form.

    Screen shot of a program Anime 0.3a 

    Nonki Takahashi

    Friday, April 21, 2017 5:11 PM
  • added some features to nonki's anim: NJL787

    • open images
    • move imgs as shapes by dragdrop
    • zoom by mswheel
    • effects bt rightclick - rotate,blend,pulse
    • select shape  by clicking on image
    • some ld-bugs: after stopping pulse, image cannot be zoomed((

    • Edited by Tryhest Saturday, April 22, 2017 6:35 AM
    Saturday, April 22, 2017 6:35 AM
  • some ld-bugs: after stopping pulse, image cannot be zoomed((

    To remove a previous zoom animation completely so that it can then be zoomed normally, set the interval to 0.  The other parameter have no effect and can be anything if interval is 0.

        LDShapes.AnimateZoom(css 0 0 0 0)
        Shapes.Zoom (css 0.5 0.5)
    This also applies to other shape animations.
    Saturday, April 22, 2017 9:21 AM
  • I wrote a sample animation program: Aquarium 0.3 (TKW252-6).

    This program is trying to use Group Array which is specified here.  Group Array is important pseudo class for Anime.

    Screen shot of a program Aquarium 0.3

    Nonki Takahashi

    Wednesday, May 3, 2017 4:20 PM
  • some updates to fish anime: TKW252-7

    • added seaweed
    • smoothed fish moves
    • color changes
    • seaweed follows mouse movement

    Monday, May 15, 2017 4:43 AM
  • Tryhest, amazing seaweed.  Thanks.

    Nonki Takahashi

    Monday, May 15, 2017 10:23 AM
  • This program DHW172 has following new subroutines.

    • Group_Rotate
    • Group_GetIndexOf

    Screen shot of a program Trafic Game 0.1a

    Nonki Takahashi

    Monday, May 15, 2017 1:07 PM
  • Thanks a lot Nonki  :)
    Thursday, May 18, 2017 12:00 PM
  • This program (NQH136) has a workaround to avoid the issue 31 of SB 1.0 Known Issues.

    Screen shot of a program Robot Animation 0.2

    Nonki Takahashi

    Monday, May 20, 2019 1:50 AM
  • I wrote a program which has following anime array to describe the motion.  The program ID is QXF519.  This program needs to remove comment marks of File objects before running.

      anime[1] = "func=load;name=Stars1;x=0;y=0;path=stars.png;"
      anime[2] = "func=move;name=Stars1;x=0;y=428;at=0s;dur=3s;"
      anime[3] = "func=move;name=Stars1;x=-598;y=0;at=3s;"
      anime[4] = "func=move;name=Stars1;x=0;y=0;at=6s;dur=3s;"
      anime[5] = "func=move;name=Stars1;x=0;y=-428;at=12s;dur=3s;"
      anime[6] = "func=load;name=Stars2;x=0;y=-428;path=stars.png;"
      anime[7] = "func=move;name=Stars2;x=0;y=0;at=0s;dur=3s;"
      anime[8] = "func=move;name=Stars2;x=598;y=0;at=6s;dur=3s;"
      anime[9] = "func=move;name=Stars2;x=0;y=428;at=9s;"
      anime[10] = "func=move;name=Stars2;x=0;y=0;at=12s;dur=3s;"
      anime[11] = "func=load;name=Rocket;x=208;y=154;;"
      anime[12] = "func=move;name=Rocket;x=208;y=10;at=0s;dur=3s;"
      anime[13] = "func=rotate;name=Rocket;angle=-90;at=3s;dur=3s;"
      anime[14] = "func=rotate;name=Rocket;angle=0;at=9s;dur=3s;"
      anime[15] = "func=move;name=Rocket;x=208;y=154;at=12s;dur=3s;"

    This program also needs following files:

    Screen shot of a program Anime Pilot v0.1

    Nonki Takahashi

    Wednesday, October 23, 2019 2:33 PM
  • Wednesday, October 30, 2019 2:42 PM
  • Recent status report on "Anime"

    • "Group" pseudo class has been renamed "Sprite". (details)
    • I decided to use LitDev Extension for Anime.  This means to support polygon and making code smaller.
    • We are making SVG Viewer to render SVG.

    Nonki Takahashi

    Wednesday, April 8, 2020 10:18 AM
  • Anime 0.5a has been released.

    • Menu changed to use LitDev Extension
    • Sprites are just demo
    • Each menu just shows a popup

    Screen shot of a program Anime 0.5a

    Nonki Takahashi

    Thursday, April 9, 2020 4:23 AM
  • Shapes editor v2.4 has been released.

    • Supported dark grid
    • File name displayed in title

    Screen shot of a program Shapes 2.4

    Nonki Takahashi

    Thursday, April 9, 2020 11:55 AM