Forum Archive

SpriteKit wrapper

mikael

Demo gif

Got excited about using SpriteKit, and quickly noted that it is not fun to use without a Python wrapper, so.

SpriteKit is interesting mainly if you need some 2D physics like collisions or field effects.

Here‘s a simple example demonstrating some features available so far:

scene = Scene(
  background_color='black',     #1
  physics=SpacePhysics)         #2

class SpaceRock(SpriteNode):    #3

  def __init__(self, **kwargs):
    super().__init__(**kwargs)
    self.angular_velocity = random.random()*4-2
    self.touch_enabled = True   #4

  def touch_ended(self, touch): #4
    self.velocity = (
      random.randint(-100, 100),
      random.randint(-100, 100)
    )

ship = SpriteNode(
  image=ui.Image('spc:EnemyBlue2'), 
  position=(150,600),
  velocity=(0, -100),          #5
  parent=scene)

rock = SpaceRock(
  image=ui.Image('spc:MeteorGrayBig3'), 
  position=(170,100),
  velocity=(0,100),
  parent=scene)

scene.view.present()

Points to note:

  1. Many familiar features work as they do in the scene module, like setting colors etc.
  2. Physics settings like gravity, linear damping (air friction) and restoration (bounciness) can be set with convenient packages.
  3. All nodes are inheritable.
  4. Individual nodes are touchable (and thus support gestures as well).
  5. Physics are accessible without explicitly playing with SpriteKit physicsBody.

This is work in progress, available on github. If you are interested in using SpriteKit in this way, let me know and we can guide the wrapping progress in a useful way.

mikael

Here's a pool/billiards table I am using as a testbed for the SpriteKit wrapper.

Pool table

You can actually play 8-ball with it, but mainly demo-pool.py tests and demonstrates how to:

  1. Create a "hollow sprite" - the sides of the pool table, for the balls to bounce in.
  2. Make a node (the table) unmoveable by setting dynamic to False.
  3. Make nodes for display only (the pockets) by setting body to None.
  4. Create a gravity field node (in the pockets) to simulate the small slope into the pockets.
  5. Limit the effect of the gravity field to a small circular region - first version pulled the balls clear across the table, which made the game a bit too easy. :-)
  6. Manage the touches on the cue ball with its internal coordinate system that of course rotates with the ball.
  7. Use category_bitmask and contact_bitmask to detect when the ball enters a pocket.
  8. Use update to make changes that cannot be made while the simulation step is running (moving balls to the side of the table).
  9. Use category_bitmask and collision_bitmask to temporarily prevent a pocketes cue ball from interacting with the table or other balls when it is being moved back to the table.

I think that this also demonstrates the relative power of SpriteKit, as the demo is only about 200 lines of code.

mithrendal

Very cool stuff !! 😃

cvp

You're a champion, but not only of pool/billiards table 😀

SmartGoat

What a masterpiece, you’re an awesome developer @mikael !

mikael

Another testbed/demo, a Hill Climb Racing clone, code here.

Demo video

Demonstrates how to:

  • Generate an unending terrain.
  • Use a smooth curve as the top of the terrain.
  • Pin the wheels to the car, allowing them to roll.
  • Setting several physical constants (poorly, as is evident already from the short animation above).
  • Set a camera to keep the car visible, leading a bit.
  • Anchor a hud element (the score) to a constant relative place on the screen (label as a child of the camera node, with a bit of non-SpriteKit extra to make it more intuitive).
  • Creating a fully rotation-responsible scene without any references to the screen size.

150 lines

cvp

@mikael whaaaa so a nice effect with a so little code. I'm jealous, super

JonB

Does anyone have any of the old skscene examples from the early pythonista1.6 betas. At one point I think I had copied them after the scenekit or whatever it was called module was abandoned by omz, but I'd have to dig around in the backups.
Also, iirc, there was a nice level editor that was supposedly pure python.

Just thinking this might give some other thoughts on things to implement. I remember a clock with falling numbers, and maybe a breakout clone.

Anyway, this is some cool stuff @mikael.

cvp

@JonB perhaps here

cvp

If you search for old scripts, try https://github.com/tdamdouni/Pythonista

mikael

@JonB, oh man, yes, looking at some of the scripts in tdamdouni repo, they import an sk module which clearly has many or all the nodes defined. And there are pysk files which define game levels.

Now if we could just find the sources these refer to.

cvp

Here https://github.com/tdamdouni/Pythonista/blob/master/omz/SKExample.py

And https://github.com/tdamdouni/Pythonista/blob/master/omz/sk.py

JonB

Yeah, that GitHub has a bunch of the other examples, including that clock I remember, and pysk files. The sk module was a c module.

mikael

@JonB, no hope for finding a ready-made, Pythonista-runnable sk module then, but the pure Python level editor sounds nice, and could probably be made to work with this wrapper. Was it made by @omz?

JonB

In retrospect, the editor was not pure python, but the load_sk or whatever was. It is possible (haven't tried) that the pysk editor still works -- for many versions after the sk module was removed, when you opened a pysk, pythonista had a custom editor, very similar to opening a pyui. Iirc, it let you add backgrounds, by adding assets on a grid, and also let you add pins and specify gravity or physics... But it has been a while. Take a look at the pysk files which are just json.

mikael

Some more demos.

First, here is the script by @jbking that got me started on the SpriteKit path. Below you can see the same implemented in the wrapper, with every touch dropping a random rectangular or circular block. With couple of blocks placed on the platform at the start, this becomes a surprisingly addictive game of "can I clear the platform".

Drop pic

Technically, the interesting bit here is how easy it is to make the scene work with rotation by just placing the anchor point in an appropriate place - in this case at (0,5,0), equal to the center of the bottom edge.

Another oldie but goodie is dropping random doodles:

Draw animation

Making this happen lead to surprisingly many challenges with using paths as physics bodies:

  • SpriteKit has a method that creates a physics body from a path, but this method is very finicky, requiring the path is a counterclockwise and convex, which is rarely what you have at hand.
  • Thus I included a method to create a convex hull surrounding the points of the path.
  • SpriteKit also has a method for creating a smooth spline over a set of points, but no way to continue the path thus created, and the famously "opaque" CGPath is quite hard to inspect & manipulate in Python.
  • So I included a bit kludgy methods that get the points out of a ui.Path, and the Bézier definitions out of the spline created by SpriteKit.
  • With these, the API feels mostly natural, and you can provide either a ui.Path or a set of points to create the ShapeNode, and choose to have smoothing applied or not.

Smoothing image

  • Convex hull is not a 100% solution for paths, as concave spots or arcs curving out between two points are not accurately represented.
  • Thus there is an option to use a texture-based body instead of the convex hull. According to Apple, this is the least performant option, but probably ok in most cases, so I made it the default.
  • In the doodle demo, above, every other doodled object uses a hull and every other a texture as the physics body, and I find it hard to tell which is which.
ccc

https://github.com/TheAlgorithms/Python/blob/master/divide_and_conquer/convex_hull.py

mikael

Time for the space race!

Space race demo animation

Features tested:

  • Animation Actions - Many but not all of the multitude of actions have been enabled, with a little addition of Python syntax - you can choose to use a set instead of Action.group, and a list instead of Action.sequence, like in this "pulsing" example for the race course buoys:
    A = Action
    node.run_action(
      A.forever([
        A.scale_to(1.2, timing=A.EASE_IN_OUT),
        A.scale_to(1.0, timing=A.EASE_IN_OUT),
      ])
    )
  • EmitterNode can be used for particle effects like the ship's thrust.
  • Background tiling is a custom feature of the CameraNode - you provide a tile and a factor for relative movement, like here:
    self.camera.layers.append(Layer(
      Texture('background.png'), pan_factor=0.2, alpha=0.4))

The layers in the layers list are ordered from closest to furthest away.

  • EffectNode is used for the background performance, to cache all the individual tiles as one bitmap.

Also planning to use this as a testbed for various field effects, inverse kinematics and remote play.

mikael

Introducing Vertigo Vortex! Coming to you courtesy of "little" help from @JonB.

Vortex demo run

This demonstrates both visual warping and a vortex field effect.

You can read more about warping in Apple docs. Here I included a custom spiral warping effect, which resembles some of the shader effects except it is much nicer to code in Python than in the shader quasi-C.

Applying the effect:

spritenode.warp = WarpGrid(21,21).set_spiral(-math.pi*2)

Parameter of set_spiral tells how much the points on the outer circle move counter-clockwise; in the example case, full 360 degrees clockwise. Spiral effect then happens when points closer to the center are rotated less.

Sequences of warps can be animated, e.g. like this:

warps = [
  WarpGrid(21,21).set_spiral(-math.pi/1.25/10*i) for i in range(11)
]
spritenode.run_action(Action.warps(warps, duration=3.0))

Warp animation

About the magic numbers 21,21 in the grid initialization - I do not know how detailed the grid must be, but I expect some detail is needed for most effects, as different grid sizes produce very different results. You can see the difference below, where all the images except the origonal apply the same 90-degree counter-clockwise effect, only with different level of granularity:

Effect of grid size

With the vortex physics field effect, I had to cheat, since I could not get the SpriteKit vortex field to work.

With field strength 0.003, the field was still throwing the ship around much too hard, yet with strength 0.002 the field turned off completely.

So instead of fighting this, I opted to manually apply a tangential force in the update. Works fine here, but could be a performance topic if you need more complex things.

JonB

Did you play with the falloff parameter of the vortex? The field strength falls off as
pow(distance - minRadius, -falloff)

So depending on what your scaling parameters are, you might try a smaller falloff, and maybe a larger minRadius. I think the default falloff is 2, meaning as your distance doubles, the strength falls off by 4x. Looks like you used 100 meaning when the distance doubles, the strength falls off by 2**100! Your cheat effectively used falloff of 0. I bet if you crank the strength back up, and set falloff to 0, or something in the .5-2 range, it will work as expected.

mikael

@JonB, thanks for checking the code. Falloff 100 was just last of a series of trying different values, but even with falloff 0, the result I see is the same: strength 0.002 looks like no field at all, strength 0.003 is completely overpowered.

I thought I might wait and see if iOS 13 brings any change to this.

JonB

Do you set the mass of your space ship? Also, have you played with region /minimum radius?

SmartGoat

This is becoming even more awesome ! Congrats @mikael for those wonderful spiral effects ! Do you think you should be able to make a 2D light system ?
Cordially,
SmartGoat

JonB

@mikael I think you wanted a radial_gravity field instead of vortex. At least that’s what you simulated. Vortex forces are along the tangent direction, instead of radial. What you might want is a co-located vortex and radial gravity, to create a sort of whirlpool.

The vortex_field.node.minimumRadius also prevents the field from blowing up at the center if you use a positive falloff.

JonB

@SmartGoat

lighting

class LightNode(Node):
  enabled = node_relay('enabled')
  ambient_color = node_relay('ambientColor')
  light_color = node_relay('lightColor')
  shadow_color = node_relay('shadowColor')
  falloff = node_relay('falloff')
  category_bitmask = node_relay('category_bitmask')
  def __init__(self, **kwargs):
    self.node = SKLightNode.node()
    super().__init__(**kwargs)

And following added to SpriteNode def

  lighting_bitmask = node_relay('lightingBitMask')
  shadowed_bitmask = node_relay('shadowedBitMask')
  shadow_cast_bitmask = node_relay('shadowCastBitMask')

Which allows one to do

  ship.lighting_bitmask=1
  ship.shadow_cast_bitmask=1
  L=LightNode(parent=scene, position=(270,500))
  L.falloff=2
  L.category_bitmask=1
  L.z_position=100
  L.ambient_color=UIColor.redColor()

  texture=SKTexture.textureVectorNoiseWithSmoothness_size_(.5,CGSize(1400,1400))
  n=texture.textureByGeneratingNormalMap()
  bg=SKSpriteNode.spriteNodeWithTexture_normalMap_(texture,n)
  bg.lightingBitMask=1
  bg.shadowedBitMask=1
  scene.node.addChild_(bg)
  bg.zPosition=-10
mikael

@JonB:

  • I have set range, which seems to work fine
  • I have not set minimum distance, as the default is a very small value, and not an issue yet
  • I tried playing with density, but it does not have an impact as vortex sets the velocity regardless of mass
  • I am sure I want the tangential ”flinging away” vortex field instead of the radialGravity (which would be more like the gravity of a black hole, planning on adding that later)
JonB

Your simulated vortex is really a radial_gravity.

Vortex field applies a force, not a constant velocity. I think your mass was like 0.03 or something like that. I suspect the physics engine is using singles, in which case really teeny mass any really teeny forces combined with high velocity might not be numerically stable.

If you bump up ship mass, to 1, strength of near 1 behaves better, though you'd have to increase the thrust, etc otherwise you can't move the rocket. Maybe a colocated drag field could also help with things going crazy, though I didn't try that yet. Another thought I had but have not tried is two fields with different region, one with negative strength, so you get a sort of narrow annular ring of force, which prevents things from accelerating really high.

mikael

@SmartGoat, now the version on GitHub has LightNode support similar to @jonb's example:

Rocks and a light

Lower rock uses the default normal map for a moderate but not bad shading effect:

rock = SpriteNode(
  'spc:MeteorGrayBig3',
  lighting_bitmask=1,
  parent=scene)

light = LightNode(
  category_bitmask=1,
  light_color='white',
  falloff=1.2,
  position=(50,100),
  parent=scene
)

The upper rock has a normal map where I upped the contrast so that there's some clear ridges:

rock_too = SpriteNode(
  'spc:MeteorGrayBig3', 
  normal_texture=Texture('spc:MeteorGrayBig3').normal_map(contrast=10),
  lighting_bitmask=1,
  position=(100,200),
  parent=scene,
)

Textures have a normal_map method that has the optional smoothness (default 0.0) and contrast (default 1.0) parameters.

Texture class also has a noise_vector_map method, with a required size parameter and optional smoothness (default 0.0). This returns a random normal field, like the one @jonb used in his example.

mikael

@JonB, thank you for your tenacity.

On the topic of the vortex field, I stand firm. As the doc says: ”The physics body is accelerated along the perpendicular of the line between the field node’s position and the position of the physics body.”

On the topic of the low mass of the ship being the problem, you were right (again). After setting the ship’s density to 100, which brought its mass above 1.0, the field behaves sanely and field strength of 1 turns out to be just about right for my purposes.

Thank you!

JonB

The physics body is accelerated along the perpendicular of the line between the field node’s position and the position of the physics body.”

Right this is saying the force lines travel in circles around the node (tangential, instead of radial). If you debug_fields, that is clear.

You said the vortex applies a velocity, which is one thing I was disputing -- it applies force. (Force=mass*acceleration, so it also could be said to produce a mass dependant acceleration). But it does not produce a velocity, directly anyway.

(There is a spritekit velocity field, iirc, which does enforce a constant velocity, based on the texture. That's more for thinks like things floating in a river, or conveyor belt, etc-- though you could create a custom texture that acted like a tangential velocity field... But I'm not sure how that behaves with other physics -- if the velocity is enforced rather than acting like a drag or friction, it seems like things in the field are at the mercy of the field)

The other thing I was saying is that simulate_vortex is actually simulating radial gravity... But I was wrong -- I didn't see the
v.radians += math.pi/2
line, so I misread that you were applying the force along the direction to the bouy not perpendicular to it. Sorry for the confusion!

mikael

@JonB, yes, I misread/misremembered the acceleration as velocity, and also forgot some of my basic physics as well, and really should have taken the time to go back to the docs after your first message, sorry.

In any case, I am super happy to have this clarified, both in order to avoid similar confusion with fields in the future, as well as to avoid any extra Python code in the update.