Transparent Scene background using objc_utils?
I'm trying to overlay a
SceneViewon top of a
WebView. The goal is to have the
WebViewshow mp4 video using html while the
SceneViewrenders game objects and processes touch events. (I got the mp4 and html part working.)
Scenealways have a solid
background_colorthat blocks the webview content and I cannot make the Scene background transparent.
Here is a toy example:
from scene import * import ui class GameScene(Scene): def setup(self): self.background_color = None # the background_color here only accepts RGB but not RGBA self.view.alpha = 0.2 # this changes the alpha of the entire SceneView, making both the background and the contents transparent. sp = SpriteNode('emj:Christmas_Tree', anchor_point=(0,0), position=(100,100), parent=self) w, h = ui.get_window_size() frame = (0,0,w,h) v = ui.View(frame=frame) webview = ui.WebView(frame=(w/4,0,w/2,h)) webview.load_url('http://google.com') v.add_subview(webview) gameview = SceneView() gameview.scene = GameScene() gameview.frame = (w/4, 0, w/2, h/2) v.add_subview(gameview) # overlay SceneView() on top of WebView() gameview.bring_to_front() v.present('full_screen')
@cvp Thanks for trying! I'm stuck at the point where I couldn't find a way to access
A few thoughts, have not tried yet:
SpriteKit has a SKVideoNode, although this might be tricky to integrate into a SceneView. I'm not sure whether the underlying SKScene business is exposed.
Have you tried ObjCInstance(scene) and see if it returns an objc object? Or, perhaps ObjCInstance(scene.view). If so, then you should have access to background_color (though you might also need to set ObjCInstance(scene.view).allowsTransparency=true.
I've tried but still without success.
ObjCInstance(scene.view) has no attribute allowsTransparency.
I also tried to set its background color as ObjCClass('UIColor').clearColor().
Okay, played around with this a little.
From what I can tell, we may need to swizzle the glkView_drawInRect_ to call the glClearColor. Though I'm not even sure that will work. You also have to set opaque=False on the sceneview and perhaps glkView.. but again since glClearColor is not called in the drawInRect, I don't think that helps us.
Another approach which does seem to work but will be super annoying is to set the
ObjCInstance(sceneview).layer(), or perhaps
ObjCInstance(sceneview).glkView().layer(). You would then create a CALayer positioned over your sprites. You'd have to keep repositioning the layers as the sprites move, which might not be reliable, and at least would take some math.
is a simple working example of a SceneView on top of a webview, with a mask layer. Touches work over the original scene size (note you can touch outside the tiny pythonista logo). I didn't try getting the mask size exactly right, or try repositioning from within the scene... we'll call that an exercise for the reader!
scenemodule isn't based on SpriteKit at all, even though the API is very similar (and I originally wanted to use SpriteKit). It's all just OpenGL basically.
I'm trying to implement some GLKit similar to this: https://forum.omz-software.com/topic/2066/python-opengles
@omz Any suggestion?
Update: Now I add
webviewas a background
As long as the
GLKViewin the front has
glClearColor(0, 0, 0, 0)in its
glkView_drawInRect_()delegate method, the GLKView will be transparent.
However, as you can see from the following code, once I plug in a new delegate to the
SceneView, its connection to
Sceneis also lost (I got the transparent background, but no longer able to draw
from objc_util import * from scene import * import ui glClearColor = c.glClearColor glClearColor.restype = None glClearColor.argtypes = [c_float, c_float, c_float, c_float] glClear = c.glClear glClear.restype = None glClear.argtypes = [c_uint] GL_COLOR_BUFFER_BIT = 0x00004000 def glkView_drawInRect_(_self, _cmd, view, rect): glClearColor(1, 0, 0, 0.3) glClear(GL_COLOR_BUFFER_BIT) MyGLViewDelegate = create_objc_class('MyGLViewDelegate', methods=[glkView_drawInRect_], protocols=['GLKViewDelegate']) class ChristmasScene(Scene): def setup(self): objv = ObjCInstance(self.view) delegate = MyGLViewDelegate.alloc().init() objv.glkView().setDelegate_(delegate) objv.glkView().setOpaque_(False) sp = SpriteNode('emj:Christmas_Tree', anchor_point=(0,0), position=(500,300), parent=self) w, h = ui.get_window_size() webview = ui.WebView(frame=(w/4,0,w/2,h)) webview.load_url('http://google.com') gameview = SceneView() gameview.scene = ChristmasScene() gameview.add_subview(webview) webview.send_to_back() gameview.present('full_screen')
Just figured out the solution!
It's very simple. Just need to call
glClearColor(0, 0, 0, 0)and
glClear(GL_COLOR_BUFFER_BIT)at every frame by in
class ChristmasScene(Scene): def setup(self): objv = ObjCInstance(self.view) objv.glkView().setOpaque_(False) sp = SpriteNode('emj:Christmas_Tree', anchor_point=(0,0), position=(500,300), parent=self)) def draw(self): glClearColor(0, 0, 0, 0) glClear(GL_COLOR_BUFFER_BIT) # The rest of the code is the same as the most recent reply. No need to set up a separate delegate.
For this to work, the
WebViewhas to be a
SceneViewas subviews of the same
SuperViewdoes not work well. Hope this doesn't break other drawing steps. Thanks again @JonB and @cvp for the help! Previous code examples from @omz and @Cethric also helped a lot for me to understand how things work.
@yueqiw Whaaaaaaaa 🎉🥂🍾