Android Example 3D Spinning Cube

Discussion in 'Tutorials & Examples' started by Johan Schoeman, Apr 28, 2018.

  1. Johan Schoeman

    Johan Schoeman Expert Licensed User

    It is mostly based on this posting. It is a 3D spinning cube. The code is very simple (the lib does all the hard lifting). You can change the images of the 6 x faces of the cube by replacing image1.png to image6.png in the /DemoRes/drawable folder of the B4A project (too lazy now to add code to the project to allow adding the images from B4A). It can be *.png or *.jpg files - as long as you keep the naming convention of image1.* to image6.*

    1. Download the B4A project
    2. Download DemoRes.zip and once unzipped you need to copy the DemoRes folder and its contents to be on the same folder level as that of the /Files and /Objects folders of the B4A project
    3. Download the B4A lib files, extract them from the zipped file, and copy them to your additional library folder.
    4. Note the CustomView in the Designer.

    I have edited the images with GIMP just to make the interfaces more visible.

    This was done just for the fun of it.....:)


    B4A sample code:

    Code:
    #Region  Project Attributes
        
    #ApplicationLabel: b4aOpenGlesPhotoCube
        
    #VersionCode: 1
        
    #VersionName:
        
    'SupportedOrientations possible values: unspecified, landscape or portrait.
        #SupportedOrientations: portrait
        
    #CanInstallToExternalStorage: False
    #End Region

    #AdditionalRes: ..\DemoRes

    #Region  Activity Attributes
        
    #FullScreen: False
        
    #IncludeTitle: True
    #End Region

    Sub Process_Globals
        
    'These global variables will be declared once when the application starts.
        'These variables can be accessed from all modules.

    End Sub

    Sub Globals
        
    'These global variables will be redeclared each time the activity is created.
        'These variables can only be accessed from this module.

        
    Private gls1 As glSurfaceView
    End Sub

    Sub Activity_Create(FirstTime As Boolean)
        
    'Do not forget to load the layout file created with the visual designer. For example:
        Activity.LoadLayout("main")

    End Sub

    Sub Activity_Resume
        
        gls1.RESUME

    End Sub

    Sub Activity_Pause (UserClosed As Boolean)
        
        gls1.PAUSE

    End Sub
    1.png
     

    Attached Files:

    miker2069, Beja, f0raster0 and 11 others like this.
  2. ilan

    ilan Expert Licensed User

    looks really nice. would it be possible to use this cube as a menu? like if i click on a side of the cube an event will be raised?
     
  3. Johan Schoeman

    Johan Schoeman Expert Licensed User

    It should be possible to do so. But the Java code needs some serious surgery to allow for that. :)
     
    miker2069, victormedranop and ilan like this.
  4. Johan Schoeman

    Johan Schoeman Expert Licensed User

    No more need for the DemoRes folder in the above B4A project. You can now pass the images to the cube from within the B4A project. You can also do the following:
    1. As mentioned above, pass the 6 cube face images from the B4A project (it is done via a list of 6 images that is passed to the wrapper)
    2. Allow the cube to be zoomed in/out while it is spinning
    3. Set the cube spinning speed - it will rotate around the RotationPlane that you set up in the B4A code (setting positive and negative values will change the direction of the rotation)
    4.Set the rotation plane (x, y, z) - values should be between -1.0 and 1.0 (float)

    Attached new B4A project and new B4A lib files. Copy the lib files (once extracted from the zip) to your additional libs folder.
    The images used in this project should be in the /Files folder of the attached B4A project.

    My AVD Manager is for some reason not working...:mad: Else I would have posted a GIF to demonstrate the spinning cube. I still have this error and no idea how to solve it.

    B4A Code:
    Code:
    #Region  Project Attributes
        
    #ApplicationLabel: b4aOpenGlesPhotoCube
        
    #VersionCode: 1
        
    #VersionName:
        
    'SupportedOrientations possible values: unspecified, landscape or portrait.
        #SupportedOrientations: portrait
        
    #CanInstallToExternalStorage: False
    #End Region


    #Region  Activity Attributes
        
    #FullScreen: False
        
    #IncludeTitle: True
    #End Region

    Sub Process_Globals
        
    'These global variables will be declared once when the application starts.
        'These variables can be accessed from all modules.

    End Sub

    Sub Globals
        
    'These global variables will be redeclared each time the activity is created.
        'These variables can only be accessed from this module.

        
    Private gls1 As glSurfaceView
       
        
    Dim facelist As List
        
    Dim mbm(6As Bitmap
       
    End Sub

    Sub Activity_Create(FirstTime As Boolean)
        
    'Do not forget to load the layout file created with the visual designer. For example:
        Activity.LoadLayout("main")
       
        facelist.Initialize
        
    'add 6 images to (List) facelist - one for each of the faces of the cube
        mbm(0).Initialize(File.DirAssets,"image1.png")
        facelist.Add(mbm(
    0))
        mbm(
    1).Initialize(File.DirAssets,"image2a.jpg")
        facelist.Add(mbm(
    1))
        mbm(
    2).Initialize(File.DirAssets,"image3.png")
        facelist.Add(mbm(
    2))
        mbm(
    3).Initialize(File.DirAssets,"image4.png")
        facelist.Add(mbm(
    3))
        mbm(
    4).Initialize(File.DirAssets,"image5.png")
        facelist.Add(mbm(
    4))
        mbm(
    5).Initialize(File.DirAssets,"image6.png")
        facelist.Add(mbm(
    5))
       
        
    'pass (List) facelist on to the wrapper
        gls1.SixFaces = facelist
       
        
    'this has to be set AFTER the LIST has been passed to the wrapper
        gls1.ZoomInOut = True                       'it will make the cube zoom In/Out while spinning anround the below defined RotationPlane
        gls1.CubeSpeed = 3.0                        'A negative value will reverse the direction of the spin
        gls1.RotationPlane(1.0, -1.00.0)          'Keep these values between 0.0 and 1.0 (you can also apply negative values)
       
    End Sub

    Sub Activity_Resume
       
        gls1.RESUME
           
    End Sub

    Sub Activity_Pause (UserClosed As Boolean)
       
        gls1.PAUSE

    End Sub

    Zoomed in:
    1.png


    Zoomed out:
    2.png
    Lib:

    glSurfaceView
    Version:
    1
    • glSurfaceView
      Fields:
      • ba As anywheresoftware.b4a.BA
      Methods:
      • DesignerCreateView (base As anywheresoftware.b4a.objects.PanelWrapper, lw As anywheresoftware.b4a.objects.LabelWrapper, props As anywheresoftware.b4a.objects.collections.Map) As void
      • IsInitialized As boolean
      • Initialize (ba As anywheresoftware.b4a.BA, EventName As java.lang.String) As void
      • RESUME As void
      • PAUSE As void
      • BringToFront As void
      • SetLayout (arg0 As int, arg1 As int, arg2 As int, arg3 As int) As void
      • SendToBack As void
      • SetVisibleAnimated (arg0 As int, arg1 As boolean) As void
      • RemoveView As void
      • Invalidate3 (arg0 As int, arg1 As int, arg2 As int, arg3 As int) As void
      • Invalidate2 (arg0 As android.graphics.Rect) As void
      • RotationPlane (rotation_x As float, rotation_y As float, rotation_z As float) As void
      • SetColorAnimated (arg0 As int, arg1 As int, arg2 As int) As void
      • SetBackgroundImageNew (arg0 As android.graphics.Bitmap) As anywheresoftware.b4a.objects.drawable.BitmapDrawable
      • Invalidate As void
      • SetLayoutAnimated (arg0 As int, arg1 As int, arg2 As int, arg3 As int, arg4 As int) As void
      • RequestFocus As boolean
      Properties:
      • Left As int
      • Background As android.graphics.drawable.Drawable
      • Parent As java.lang.Object [read only]
      • CubeSpeed As float [write only]
      • Color As int [write only]
      • SixFaces As java.util.List [write only]
      • Enabled As boolean
      • ZoomInOut As boolean [write only]
      • Top As int
      • Visible As boolean
      • Padding As int[]
      • Height As int
      • Tag As java.lang.Object
      • Width As int
     

    Attached Files:

    Last edited: Apr 29, 2018
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice