I hsve a couple concepts that i could use some input for. they are for the RPG ive been developing and in kind of stuck on jow i should progress from here as far as style for graphics.. check em out and please let me know any input GOOD or BAD

Magical Rune Stone.

v2 @Drizzel

Comon Sword.

v2 @Drizzel

Comon dagger.

Short Bow.

Player Attributes Icon

spell book icon

regular berrel. mostly just the color scheme the object istself is not corect perspective.

Mana Potion

Constitution icon or health icon.

Ruby Garnets

thank u in advance

Note:

i would use Vector Graphics but i cannot figure out a way to load svg or even get thar svg to a ui.image or scene.Texture..

@stephen Nice pictures.

I guess that you know that you can display a svg in a WebView

import os
import ui
w = ui.WebView()
fpath = os.path.expanduser('~/Documents/test.svg')
w.load_url('file://'+fpath)
w.present('sheet') 

@cvp

yes my problem with that is i need them to be scene.Textures.. that way i can use them for modular animation

As far as I've understood, you want some design feedback on these graphics, right?
Did you design these graphics yourself? If not, this might be a bit too detailed, sry

General feedback
* all designs are really well recognisable
* every color scheme is good
* not a single flaw in the perspectives
* you repeat that they're icons. If they're going to be shown in a small size, they might be too detailed

Rune Stone
* I love the design
* if you want to minimalise it, get rid of the grey scratches (not the black cracks)

Common Sword
* I dunno, but I'd assume that a common sword would neither have a gem inlay nor a fancy hilt and guard (after all it's a golden color)
* if you want to minimalise it, get rid of the scratches.
* the dents look awesome

Short bow
* What you show here is a long bow, a short bow usually has a recurve in order to deliver greater power (check out recurve bows)
* the wrapping fits the sword handle, nice touch

Attributes:
* Amazing looking
* already quite minimal, since there's no scratches
* absolutely no more improvement suggestions

spell book icon
* looks great
* maybe a bit to detailed (depends on how large it is when shown in your rpg)
* maybe add some shadows around the rune stones to add depth, they are weirdly flat right now

barrel
* good color scheme, but I'd darken the wood colors to a walnut color, looks more aged interesting

mana potion
* darken the cork, otherwise the design is great
* no need to minimalise

health icon
* too detailed, get rid of the "HP"
* the ouch and scratches in the top left are a nice touch.
*maybe replace the patches with the scratches from the top left, and leave the top left empty

ruby garnets
* look amazing, perspective is well done

@Drizzel THANK YOU this is exactly the kind of respone im hoping for from anyone who participates 😊🤓

ys im having to do all aspects of this game, programing, art, dialouge, quest lines ect... but on my way im going to also be giving back to the community "barebone" scripts to help others. like openworld even handler, quest system, combat system ect...

im going to look into your suggestions and ill post updated concepts for public reviewthank you!

updated..

and the reason for some of the extra detail, not counting tiny scratches, is compensation for resizing they start out as 4000pxx4000px and after processing they end up around 150ptx150pt the process i use is actually prety effective heres a example of a 6kx6k down to 1kx1k

HD 6k to 1k

Did you draw them on an iOS device? If yes, which app did you use? I'm rather intrigued because Vectornator (what I'm using) is good, but certainly not perfect.

@stephen said:

my problem with that is i need them to be scene.Textures..

You can convert a sgv to an ui.Image via

import os
import ui

w = ui.WebView()
fpath = os.path.expanduser('~/Documents/test.svg')
w.load_url('file://'+fpath)
w.present('sheet')

with ui.ImageContext(w.width, w.height) as ctx:
    w.draw_snapshot()
    ui_image = ctx.get_image()
ui_image.show()

@cvp dos this preserve alpha?

@Drizzel said:

Did you draw them on an iOS device? If yes, which app did you use? I'm rather intrigued because Vectornator (what I'm using) is good, but certainly not perfect.

on iPad Air2
sketch
Draw
vectornator

most of it is hand painted and with Draw you can use brushes to draw vectors but vectornator give beter control of the vertices.. and the export scaling helps alot
y process for drawing usually goes...
Adobe Sketch ⇒ AdobeDraw for base structure
Adobe Draw ⇒ Adobe Sketch for detailing
Adobe Sketch ⇒ Vectornator for finalizing and export.

you can also save to creative cloud on vectornator to combine all three for pretty good workflow

@stephen said:

dos this preserve alpha?

No idea at all. I just thought a little time to find a solution svg -> ui.Image

@cvp thank you! when i get back to the animation system ill rewrite the texture cache and see if i can get that to work

@cvp said:

@stephen said:

my problem with that is i need them to be scene.Textures..

You can convert a sgv to an ui.Image via
```

import os
import ui

w = ui.WebView()
fpath = os.path.expanduser('~/Documents/test.svg')
w.load_url('file://'+fpath)
w.present('sheet')

with ui.ImageContext(w.width, w.height) as ctx:
w.draw_snapshot()
ui_image = ctx.get_image()
ui_image.show()
```

all i get is a white rect from this 😕

@stephen For me it is ok for a static svg but white rectangle if animated svg, what you did not yet ask at this moment 🙄

@stephen UIWebView does not support animated svg but SFSafariViewController does

See my script and for instance

    main('https://codyhouse.co/demo/animated-svg-icon/index.html') 

@cvp

here is the same file im testing with. and the mage should have transparency

@stephen increase the frame and it is ok

import os
import ui

w = ui.WebView()
w.frame = (0,0,500,500)
fpath = os.path.expanduser('~/Documents/svg-test.svg')
#fpath = os.path.expanduser('~/Documents/test.svg')
w.load_url('file://'+fpath)
w.present('sheet')

with ui.ImageContext(w.width, w.height) as ctx:
    w.draw_snapshot()
    ui_image = ctx.get_image()
    ui_image.show() 

@cvp

awesome didnt think about the frame. but sadely i seem to lose the alpha transparency. im sure i can go through the process of adding one but at that point id have to change format and then i lose the perks of vector graphics. plus id have to run the add alpha process to a library of images for the game and that seemsnlike a bad idea lol. thank you tho for checking it out for me 😊

@stephen transparency works

import os
import ui

v = ui.View()
v.frame = (0,0,500,250)
v.name = 'with or without opacity=0'

w1 = ui.WebView()
w1.frame = (0,0,250,250)
html = '''
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="304" height="290">
    <path d="M2,111h300 l-242.7,176.3 92.7-285.3 92.7,285.3z"
    fill="#FB2" stroke="#B00" stroke-width="4" stroke-linejoin="round"/>
</svg>
'''
w1.load_html(html)
v.add_subview(w1)

w2 = ui.WebView()
w2.frame = (250,0,250,250)
html = '''
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="304" height="290">
    <path d="M2,111h300 l-242.7,176.3 92.7-285.3 92.7,285.3z"
    fill="#FB2" stroke="#B00" stroke-width="4" stroke-linejoin="round" fill-opacity="0"/>
</svg>
'''
w2.load_html(html)
v.add_subview(w2)

v.present('sheet')

#with ui.ImageContext(w.width, w.height) as ctx:
#   w.draw_snapshot()
#   ui_image = ctx.get_image()
#   ui_image.show() 

@cvp ya you are creating the opacity programaticaly (if thats the right term here lol ) where in my image it is solid where it should have a 50% alpha that i set in third party editor.

@stephen I don't know anything about it but it is only to show that WebView supports opacity in static svg...

@stephen how are sure that your file test-svg.svg is half transparent?

gotcha thank you @cvp 🙃

@stephen sorry, I don't understand What you mean

@cvp
its ok buddy i had done some research before (you probably know by now how i love research lol) and i couldnt find a way to use svg in scene. im sure there is an objc way but im not familier enough there lol

@stephen I just found that WebView supports animated svg, try this

import os
import ui

w = ui.WebView()
w.frame = (0,0,500,500)
#fpath = os.path.expanduser('~/Documents/svg-test.svg')
#w.load_url('file://'+fpath)
html = '''
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 300">
    <rect class="mouse" x="0" y="0" width="800" height="300"/>
    <polygon class="diamondTu tulip" points="400, 280, 310, 150, 400, 20, 490, 150"/>
    <style>
        .mouse { fill: #E5E4E3; }
        .tulip { fill: #CC2954; }
        .diamondTu {
            animation-name: diamondTurns;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            transform-origin: 50% 50%;
        }
        @keyframes diamondTurns {
            0%   { transform: rotate(0deg); }
            50%  { transform: rotate(-90deg); }
            100% { transform: rotate(0deg); }
        }
    </style>
</svg
'''
w.load_html(html)
w.present('sheet')

#with ui.ImageContext(w.width, w.height) as ctx:
#   w.draw_snapshot()
#   ui_image = ctx.get_image()
#   ui_image.show() 

@stephen said:

i couldnt find a way to use svg in scene. im sure there is an objc way

I think that I had read that SKTexture does not support svg 😢

@stephen Perhpas could you use Shader, as here (try it)

Édit: sorry, it needs a/your test.jpg in the folder of the script

# shader example from Pythonista doc about Scene.Shader
from scene import *
import os

# RIPPLE GLSL shader program
ripple_shader1 = '''
precision highp float;
varying vec2 v_tex_coord; // texture coordinate
// These uniforms are set automatically:
uniform sampler2D u_texture; // input image
uniform float u_time; // timer 
uniform vec2 u_sprite_size;
// This uniform is set in response to touch events:
uniform vec2 u_offset;

void main(void) {
    vec2 p = -1.0 + 2.0 * v_tex_coord + (u_offset / u_sprite_size * 2.0);
    float len = length(p);
    vec2 uv = v_tex_coord + (p/len) * 1.5 * cos(len*50.0 - u_time*10.0) * 0.03;
    gl_FragColor = texture2D(u_texture,uv); // fragment shader color
}
'''

# SPHERE EFFECT GLSL shader program
ripple_shader2 = '''
precision highp float;
varying vec2 v_tex_coord; // texture coordinate
uniform float u_time; // time in seconds
uniform sampler2D tex0; // scene buffer
void main(void)
{
  vec2 tc = v_tex_coord;
  vec2 p = -1.0 + 2.0 * tc;
  float r = dot(p,p);    
  if (r > 1.0) discard; 
  float f = (1.0-sqrt(1.0-r))/(r);
  vec2 uv;
  uv.x = p.x*f + u_time;
  uv.y = p.y*f + u_time;
  gl_FragColor = vec4(texture2D(tex0,uv).xyz, 1.0);
}
'''

#  EDGE DETECTION shader program
ripple_shader3 = '''
precision highp float;
varying vec2 v_tex_coord; // texture coordinate
uniform vec2 imageResolution;
uniform sampler2D u_texture;

  void main() {
    vec2 pos = vec2(v_tex_coord.x, 1.0 - v_tex_coord.y);
    vec2 onePixel = vec2(1, 1) / imageResolution;
    vec4 color = vec4(0);
    mat3 edgeDetectionKernel = mat3(
      -1, -1, -1,
      -1, 8, -1,
      -1, -1, -1
    );
    for(int i = 0; i < 3; i++) {
      for(int j = 0; j < 3; j++) {
        vec2 samplePos = pos + vec2(i - 1 , j - 1) * onePixel;
        vec4 sampleColor = texture2D(u_texture, samplePos);
        sampleColor *= edgeDetectionKernel[i][j];
        color += sampleColor;
      }
    }
    color.a = 1.0;
    gl_FragColor = color;
 }
'''

#  EMBOSS shader program
ripple_shader4 = '''
precision highp float;
varying vec2 v_tex_coord;
uniform sampler2D u_texture;
uniform float u_time; // time in seconds

void main()
{
  // 2
  vec2 onePixel = vec2(1.0 / 480.0, 1.0 / 320.0);

  // 3
  vec2 texCoord = v_tex_coord;

  // 4
  vec4 color;
  color.rgb = vec3(0.5);
  color -= texture2D(u_texture, texCoord - onePixel) * 5.0; //*u_time;
  color += texture2D(u_texture, texCoord + onePixel) * 5.0;
  // 5
  color.rgb = vec3((color.r + color.g + color.b) / 3.0);
  gl_FragColor = vec4(color.rgb, 1);
}
'''

# MIRROR EFFECT GLSL shader program
ripple_shader5 = '''
precision highp float;
varying vec2 v_tex_coord;
uniform sampler2D texture;
uniform vec2 u_sprite_size;
uniform float u_time; // time in seconds

void main()
{
  vec2 uv = v_tex_coord;
  float sepoffset = 0.005*cos(u_time*3.0);
  if (uv.y > 0.5)// + sepoffset)// is air - no reflection or effect
    {
        gl_FragColor = texture2D(texture, vec2(uv.x, uv.y));
    }
    else
    {
        // Compute the mirror effect.
        float xoffset = 0.005*cos(u_time*3.0+200.0*uv.y);
        float yoffset = ((0.3 - uv.y)/0.3) * 0.05*(1.0+cos(u_time*3.0+50.0*uv.y));
        vec4 color = texture2D(texture, vec2(uv.x+xoffset , 1.0 - uv.y+ yoffset));
        gl_FragColor = color;
    }
}
'''

class MyScene (Scene):
    def setup(self):
            self.sprite = SpriteNode('test.jpg', parent=self)
            self.sprite.shader = Shader(ripple_shader1)
            self.did_change_size()

    def did_change_size(self):
            # Center the image:
            self.sprite.position = self.size/2

    def touch_began(self, touch):
            self.set_ripple_center(touch)

    def touch_moved(self, touch):
            self.set_ripple_center(touch)

    def set_ripple_center(self, touch):
            # Center the ripple effect on the touch location by setting the `u_offset` shader uniform:
            dx, dy = self.sprite.position - touch.location
            self.sprite.shader.set_uniform('u_offset', (dx, dy))

run(MyScene())

@cvp haha thats pretty awesome! i should look into shaders im sure some post processing will do some good haha

@stephen yes, but no so easy, one language more to learn , I become too old for this stuff 😢

@stephen You only 🙄 need to (find a tool to) convert SVG into GLSL language of Shader

@cvp
never too old 😊 ive been tryingbto familierise myself with as many as i can. so far i have worked with:

• C# .net
• C
• C++
• java
• java script
• unreal script (language died)
• html
• css
• php
• sourceScript (Wraps C++ for source engine by valve)
• python

and currently objc, first through objc_utils then ObjC its self.
next will be gfx shaders

c# i got pretty well in tuned with but the rest i could use some more learning. i did notice they all, for the most part, are extremly close to eachother just dif rules

@stephen I've worked during 40 years at IBM, mainly on main frame, thus a lot of languages but not the same as you, like Assembler, FORTRAN, COBOL, PL/1, APL, ... before Basic, VB, C, C++ and I surely forget some...

@cvp thats awesome! all my study has been for recreational game development. mever had career writing